Grid布局博客地址

Vue-iView-ui 和 Vue-element-ui? 的 Grid??布局代碼有些 冗余，現在封裝一套自己的?grid布局? 以 from表單為例

支持表單校驗，國際化，錯誤信息定位，網格布局

Grid>Grid.vue

<template><div><Form v-if="type == 'iview'" ref="form" v-bind="$attrs" v-on="$listeners" :label-width="labelWidth" :label-position='labelPosition' class="grid" :style="style" ><slot></slot></Form><el-form v-else-if="type == 'element'" ref="form" v-bind="$attrs" v-on="$listeners" :label-width="labelWidth" :label-position='labelPosition' class="grid" :style="style"><slot></slot></el-form></div> </template> <script>export default {props:{column:{type:[String,Number],default:2},// 表單域標簽的寬度labelWidth:{type:[String,Number],},// 表單域標簽的位置，支持left，top，rightlabelPosition:{type:String,default:null},type:{type:[String],default:'iview',validate:function(value){// 類型必須是iview或者elementreturn ['iview','element'].includes(value)}},columnGap:{type:[String,Number],default:30},rowGap:{type:[String,Number],default:10},colon:{type:[Boolean],default:false}},provide(){return{'grid':this}},computed:{style(){return{// 設置的列的狀態，可以根據this.column設置當前行有幾列,fr是等份，代表可用剩余寬度的分配'grid-template-columns' : `repeat(${this.column},1fr)`,//設置行列間距'grid-column-gap':this.columnGap + 'px','grid-row-gap':this.rowGap + 'px'}}},methods:{validate(callback){//如果有 沒有校驗的表單元素，視圖自動顯示到這個部分// 校驗表單this.$refs.form.validate(callback);let elementError = document.getElementsByClassName('el-form-item__error');let iviewError = document.getElementsByClassName("ivu-form-item-error-tip")// this.$nextTick指的是下一個周期執行this.$nextTick(function () {if(elementError.length > 0){elementError[0].scrollIntoView({block:'center'})}if(iviewError.length > 0){iviewError[0].scrollIntoView({block:'center'})}});}}} </script> <style scoped>.grid{display: grid;grid-template-rows: 1fr;} </style>

?

Grid>GridItem.vue

<template><FormItem :label="label+colon" v-bind="$attrs" v-on="$listeners" :style="style" v-if="grid.type == 'iview'"><slot></slot></FormItem><el-form-item :label="label+colon" v-bind="$attrs" v-on="$listeners" :style="style" v-else-if="grid.type == 'element'"><slot></slot></el-form-item> </template><script>export default {inject:['grid'],props:{column:{type:[String,Number],default:1},label:{type:[String]}},computed:{style(){return {// 設置單元格的狀態，span代表合狀態，第二個參數代表合并幾等份'grid-column-end':`span ${this.column}`}},//配置冒號colon(){if(this.grid.colon){// 判斷國際化return this.$i18n.locale == 'zh' ? '：' : ':'}else{return ''}}}} </script> <style scoped> </style>

Grid>index.js

import Vue from 'vue' import Grid from './Grid.vue' import GridItem from './GridItem.vue' Grid.install = ()=>{Vue.component('Grid',Grid) } GridItem.install = ()=>{Vue.component('GridItem',GridItem) } export {Grid,GridItem }

main.js

import iviewUi from 'view-design' import 'view-design/dist/styles/iview.css' import elementUi from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import i18n from './lang/index' //全局引入Grid import {Grid,GridItem} from './components/Grid/index' Vue.use(elementUi) Vue.use(iviewUi) Vue.use(Grid) Vue.use(GridItem) new Vue({render: h => h(App),i18n }).$mount('#app')

lang>index.js

import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({locale : "zh",messages:{'zh':{},'en':{}} }) export default i18n

app.vue

<template><div ><Grid column='1' type='iview' :model="ruleForm" :rules="rules" ref="formName" colon :labelPosition="'left'" :labelWidth="'140px'" style="height:1000px"><GridItem column='1' label="活動名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></GridItem><GridItem column='1' label="活動區域" prop="region"><el-select v-model="ruleForm.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></GridItem><GridItem column='1' label="活動性質" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="線下主題活動" name="type"></el-checkbox><el-checkbox label="單純品牌曝光" name="type"></el-checkbox></el-checkbox-group></GridItem><GridItem column='1' label="特殊資源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="線上品牌商贊助"></el-radio><el-radio label="線下場地免費"></el-radio></el-radio-group></GridItem><GridItem column='1' label="活動形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></GridItem></Grid><el-button type="primary" @click="submit">提交</el-button></div> </template> <script>export default {data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{required: true,message: '請輸入活動名稱',trigger: 'blur'},{min: 3,max: 5,message: '長度在 3 到 5 個字符',trigger: 'blur'}],region: [{required: true,message: '請選擇活動區域',trigger: 'change'}],date1: [{type: 'date',required: true,message: '請選擇日期',trigger: 'change'}],date2: [{type: 'date',required: true,message: '請選擇時間',trigger: 'change'}],type: [{type: 'array',required: true,message: '請至少選擇一個活動性質',trigger: 'change'}],resource: [{required: true,message: '請選擇活動資源',trigger: 'change'}],desc: [{required: true,message: '請填寫活動形式',trigger: 'blur'}]}}},methods: {submit() {this.$refs.formName.validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});}},created(){this.$i18n.locale = 'zh'window.localStorage.setItem('lang',this.$i18n.locale)// console.log(this.$i18n.locale)}} </script> <style scoped> </style>

?

總結

以上是生活随笔為你收集整理的Vue 封装grid布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。