精华内容
下载资源
问答
  • vue 封装Form表单组件

    千次阅读 2020-07-07 20:17:09
    回显表单信息 + 验证表单 + 提交表单信息,而表单的类型也有很多(复选框,单选框,下拉框,输入框,文本框等等等)如果多个页面都有表单验证的交互且表单的内容不一样,难道我们就要去写多个表单组件吗???那该...

    - 前景

    在项目中很常见的交互:回显表单信息 + 验证表单 + 提交表单信息,而表单的类型也有很多(复选框,单选框,下拉框,输入框,文本框等等等)如果多个页面都有表单验证的交互且表单的内容不一样,难道我们就要去写多个表单组件吗???那该怎么办呢????

    - 作用

    根据element-ui 的Form表单组件,写了一个公共的组件,可以满足大多数的表单类型的验证,做的这个组件主要是以弹窗的形式在页面上展示
    主要的功能:
    -显示弹窗(根据传入的数据来决定来显示表单)
    -验证表单信息
    -提交表单信息

    - 具体代码

    App.vue

    想法:把弹窗组件挂载在app上,通过provide/inject实现跨级访问祖先组件的数据
    app.vue(引入弹窗组件)

    <template>
        <div id="app">
            <router-view :key="key"/>
            <form-dialog ref="formDialog" />
        </div>
    </template>
    
    <script>
    import formDialog from '@/components/dialogFrom'
    export default {
        name: 'App',
        components: {
            formDialog
        },
        computed: {
            key() {
                return this.$route.path + Math.random()
            }
        },
        provide() {
            const me = this
            return {
                showForm(...args) {
                    me.$refs.formDialog.showDialog(...args)
                }
            }
        }
    }
    </script>
    

    dialogFrom.vue(对应的弹窗组件)

    <template>
        <el-dialog
            :title="formTitle"
            :visible.sync="formVisible"
            :close-on-click-modal="false"
            width="960px"
            class="common-form">
            <el-form ref="form" :model="formData" :rules="formRule" label-width="130px">
                <el-form-item v-for="(item, i) in formColumns" :key="i" :prop="item.property" :label="item.title">
                    <!-- 文本框textarea -->
                    <el-input
                        v-if="item.type === 'textarea'"
                        v-model.number="formData[item.property]"
                        v-bind="item.bind"
                        :placeholder="item.placeholder||'请输入'"
                        rows="7"
                        type="textarea"
                    />
                    <!-- radio -->
                    <div v-else-if="item.type=='radio'" class="radio-wrapper">
                        <el-radio v-for="(opt, j) in item.options" :key="j" :label="opt.id" v-model="formData[item.property]">{{ opt.name }}</el-radio>
                    </div>
                    <!-- 多选框checkbox -->
                    <div v-else-if="item.type=='checkbox'" class="checkbox-wrapper">
                        <el-checkbox v-if="item.isAllCheck" :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange(item)">全选</el-checkbox>
                        <el-checkbox-group v-model="formData[item.property]" @change="handleCheckedUserGroupChange(item)">
                            <el-checkbox v-for="(opt, j) in item.options" :key="j" :label="opt.id">{{ opt.name }}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <!-- 两个input + 加减按钮 -->
                    <div v-else-if="item.type === 'mutliInput'" class="mutli-input-wrapper">
                        <ul class="mutli-input" >
                            <li v-for="(element, index) in formData[item.property]" :key="index" class="input-list">
                                <div class="input-wrapper">
                                    <el-input
                                        v-model="element.key"
                                        :placeholder="item.placeholder ||'请输入'" />
                                    <el-input
                                        v-model="element.value"
                                        :placeholder="item.placeholder||'请输入'" />
                                </div>
                                <div class="handle-btn">
                                    <el-button type="primary" icon="el-icon-plus" circle @click="addConfigInput(item, formData[item.property], index)"/>
                                    <el-button :disabled="item.isDelete" type="danger" icon="el-icon-delete" circle @click="cutConfigInput(item, formData[item.property], index)" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 下拉框 + 是否可以多选 -->
                    <el-select
                        v-else-if="item.type === 'select'"
                        :multiple="item.multiple"
                        :disabled="item.disabled || false"
                        v-model="formData[item.property]"
                        v-bind="item.bind"
                        :placeholder="item.placeholder || '请选择'"
                    >
                        <el-option v-for="(opt, j) in item.options" :key="j" :label="opt.name" :value="opt.id" />
                    </el-select>
                    <div v-else-if="item.type === 'upload'" class="avatarUploader">
                        <el-upload
                            :show-file-list="false"
                            :before-upload="beforeUpload('image', item.property)"
                            accept="image/gif, image/jpeg"
                            drag
                            action="">
                            <img v-if="formData[item.property]" :src="formData[item.property]" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div v-else-if="item.type === 'uploadAudio'" class="avatarUploader">
                        <el-upload
                            :show-file-list="false"
                            :before-upload="beforeUpload('audio', item.property)"
                            drag
                            action="">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <span v-if="formData[item.property]">{{ formData[item.property] }}</span>
                    </div>
                    <!-- 密码 -->
                    <div v-else-if="item.type === 'password'" class="pass-box">
                        <el-input
                            v-model="formData[item.property]"
                            v-bind="item.bind"
                            :placeholder="item.placeholder||'请输入'"
                            :type="item.pwdType"
                        />
                        <span class="show-pwd" @click="showPwd(item)">
                            <svg-icon :icon-class="item.pwdType === 'password' ? 'eye' : 'eye-open'" />
                        </span>
                    </div>
                    <el-input
                        v-else-if="item.type === 'englishText'"
                        v-model="formData[item.property]"
                        v-bind="item.bind"
                        :placeholder="item.placeholder||'请输入'"
                    />
                    <el-input
                        v-else-if="item.type === 'preText'"
                        v-model="formData[item.property]"
                        v-bind="item.bind"
                        :placeholder="item.placeholder||'请输入'">
                        <template slot="prepend">/</template>
                    </el-input>
                    <el-input
                        v-else-if="item.type === 'authText'"
                        v-model="formData[item.property]"
                        v-bind="item.bind"
                        :placeholder="item.placeholder||'请输入'">
                    </el-input>
                    <el-input
                        v-else-if="item.type === 'text' || item.type === 'input'"
                        :disabled="item.disabled || false"
                        v-model="formData[item.property]"
                        v-bind="item.bind"
                        :placeholder="item.placeholder||'请输入'"
                    />
                </el-form-item>
                <el-form-item>
                    <div class="dialog-btn">
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="onHide">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>
    <script>
    var formCallback = () => {}
    const qiniu = require('qiniu-js')
    export default {
        data() {
            return {
                formTitle: '编辑',
                formVisible: false,
                formColumns: [],
                formRule: [],
                formData: {},
                currentName: '',
                reEnglish: /^[a-zA-Z_]{5,}$/,
                reMath: /^\d{6}$/,
                rePassword: /^.{6,18}$/
            }
        },
        watch: {
            formData: {
                handler(val, oldVal) {
                    this.setDataStatus(val)
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            setDataStatus(val) {
                // 多个input + 加减按钮
                const mutliInputInfo = this.formColumns.find(item => item.property === 'config_content' && item.type === 'mutliInput')
                // 复选框
                const checkboxInfo = this.formColumns.find(item => item.type === 'checkbox')
                if (mutliInputInfo) {
                    mutliInputInfo.isDelete = val[mutliInputInfo.property].length === 1
                }
                if (checkboxInfo) {
                    this.handleCheckedUserGroupChange(checkboxInfo)
                }
            },
            showDialog({ formColumns, formData, formTitle }, callback) {
                formCallback = callback
                this.formTitle = formTitle || this.formTitle
                this.formVisible = true
                this.formColumns = formColumns
                this.createForm(formColumns, formData)
                this.$nextTick(() => {
                    this.$refs.form.clearValidate()
                })
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        Promise.resolve(formCallback(Object.assign({}, this.formData))).then((result) => {
                            if(result === true){
                                this.formVisible = false
                            }
                        })
                    } else {
                        console.log('validate fail')
                    }
                })
            },
            onHide() {
                this.formVisible = false
                this.$refs.form.resetFields()
                formCallback = () => {}
            },
            createForm(formColumns, formData) {
                var data = {}
                var rule = {}
                formColumns.forEach(col => {
                    if (col.type === 'select' && col.multiple) {
                        data[col.property] =  formData[col.property] === 'undefined' ? [] : formData[col.property]
                        rule[col.property] = this.genRule(col)
                    } else if(col.hasOwnProperty('property')){
                        data[col.property] = formData[col.property]
                        rule[col.property] = this.genRule(col)
                    } else if(typeof formData[col.property] === 'undefined'){
                        data[col.name] = typeof formData[col.name] === 'undefined' ? '' : formData[col.name]
                        rule[col.name] = this.genRule(col)
                    }
                })
                this.formData = data
                this.formRule = rule
            },
            addConfigInput(item, element, index) {
                if (item.isLimit && element.length >= item.isLimit) {
                    this.$message({
                        message: `最多只能添加${item.isLimit}`,
                        type: 'warning'
                    })
                    return
                }
                element.splice(index + 1, 0, { key: '', value: '' })
            },
            cutConfigInput(item, element, index) {
                if (item.isDelete) return
                element.splice(index, 1)
            },
            // 复选框勾选
            handleCheckedUserGroupChange(item) {
                const checkedCount = this.formData[item.property].length
                item.checkAll = checkedCount === item.options.length
                item.isIndeterminate = checkedCount > 0 && checkedCount < item.options.length
            },
            // 复选框全选
            handleCheckAllChange(item) {
                this.formData[item.property] = item.checkAll ? item.options.map(item => item.id) : []
                item.isIndeterminate = false
            },
            // 得到当前上传图片的name
            getCurrentName(ev) {
                this.currentName = ev.currentTarget.getAttribute('data-name')
            },
            // 上传图片
            beforeUpload(mime, property) {
                // console.log('beforeUpload', mime, property)
                const me = this
                return (file)=>{
                    this.$request.get('file/token', { params: { dir: 'adminas', num: 1, mime: "" }}).then(res => {
                    // console.log(res, 'res')
                        res = res[0]
                        const observable = qiniu.upload(file, res.key, res.token)
                        observable.subscribe({
                            complete(imageInfo) {
                                me.formData[property] = imageInfo.data.url
                            },
                            error(err) {
                                console.log("error:", err)
                            }
                        })
                        return false
                    }).catch(error => {
                        console.error(error)
                    })
                }
            },
            // 是否显示密码
            showPwd(it) {
                if (it.pwdType === 'password') {
                    it.pwdType = ''
                } else {
                    it.pwdType = 'password'
                }
            },
            genRule(column) {
                const r = {
                    message: `请输入${column.title || column.name}`,
                    trigger: 'blur'
                }
                // 验证规则
                this.verifyInput(r, column)
                r.required = !!column.required
                return r
            },
            verifyInput(r, column) {
                switch (column.type) {
                    case 'englishText':
                        r.validator = (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error('英文名称不能为空!'))
                            }
                            if (this.reEnglish.test(value)) {
                                callback()
                            }else{
                                callback(new Error('该项必须为英文字母,并且长度不能少于5个字符!'))
                            }
                        }
                        break
                    case 'authText':
                        r.validator = (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error('验证码不能为空!'))
                            }
                            if (this.reMath.test(value)) {
                                callback()
                            }else{
                                callback(new Error('验证码必须为6个字符的数字!'))
                            }
                        }
                        break
                    case 'password':
                        r.validator = (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error('密码不能为空!'))
                            }
                            if (this.rePassword.test(value)) {
                                callback()
                            } else {
                                callback(new Error('密码长度应该在6-18个字符之间!'))
                            }
                        }
                        break
                    case 'mutliInput':
                        r.validator = (rule, value, callback) => {
                            const isRequiredConfig = value.every(item => item.key !== '' && item.value !== '')
                            // 判断key值是否重复
                            const keyList = []
                            value.forEach(item => {
                                if (keyList.indexOf(item.key) !== -1) {
                                    return callback(`${column.title || column.name}的key值不得重复`)
                                }
                                keyList.push(item.key)
                            })
                            if (!isRequiredConfig) {
                                return callback(r.message)
                            }
                            callback()
                        }
                        break
                }
                r.message = ''
            }
        }
    }
    </script>
    <style>
    .common-form .el-upload-dragger {
        width: 100px !important;
        height: 100px !important;
    }
    </style>
    <style lang="scss">
        .common-form {
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
            .avatar {
                width: 100px;
                height: 100px;
                display: block;
            }
            .pass-box{
                position: relative;
                .show-pwd{
                    position: absolute;
                    right: 335px;
                    top: 2px;
                    cursor: pointer;
                    user-select: none;
                }
            }
            .mutli-input-wrapper {
                .input-list {
                    font-size: 0;
                    margin-bottom: 15px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                .input-wrapper, .handle-btn {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 14px;
                }
                .el-input {
                    width: 300px !important;
                    margin-right: 15px;
                    &:last-child {
                        margin-right: 0;
                    }
                }
                .handle-btn {
                    margin-left: 15px;
                }
            }
        }
    </style>
    

    如何去使用上面的这个表单组件呢?只需要在把下面的代码放在点击事件里就可以了
    例如a.vue

    <script>
    export default { 
    	inject: ['showForm'],
    	created() {
    		this.showForm({
    		    formTitle: '', // 弹窗的标题
    		     formColumns: [], // 表单的类型
    		     formData: {}  // 初始化表单数据
    		 }, (data) => {
    		     console.log(data) // 表单里输入的数据
    		     // 把数据提交到后台, 注意这里的return, return true 主要是为了处理只要信息提交成功之后,才可以关闭弹窗
    		     return this.$request({
    		         method: method,
    		         url: url,
    		         data: data
    		     }).then(res => {
    		         this.getTableList()
    		         return true
    		     }).catch(error => {
    		         console.error(error)
    		     }).finally(() => {})
    		 })
    	}
    }
    </script>
    

    关于表单组件的各个字段的说明

    formTitle   		string        	弹窗的标题
    
    formColumns 	Array    		表单的类型
    eg:
     [{ property: 'name', title: '配置名:', type: 'text', required: true, placeholder: '请输入配置名' },
         { property: 'config_content', title: '配置内容:', type: 'mutliInput', required: true, placeholder: '配置内容', isLimit: 5, isDelete: false },
         { property: 'type', title: '类型:', type: 'select', required: true, disabled: false, placeholder: '请选择类型', multiple: false, options: [{ id: 'custom', name: 'custom' }, { id: 'service', name: 'service' }] },
         { property: 'checkbox_name', type: 'checkbox', required: true, isAllCheck: true, checkAll: false, isIndeterminate: true, options: [] } ]
    
    property   表示存储表单某类型数据的key值
    title   表示表单某类型对应的标题
    type 表示表单对应的类型
    required Boolean 是否为必填
    
    formData Object 初始化表单的数据
    eg: { checkbox_name: [] }
    

    上面只是进行了一个简单的表单类型的使用说明,大家有需要可以看一下dialogFrom.vue就知道怎么用啦

    展开全文
  • vue封装npm组件

    2021-06-17 14:50:16
    vue封装npm组件初始化项目页面结构项目配置本地联调部署线上npm项目使用 初始化项目 封装一个组件上传到npm上,页面需要只需要npm安装依赖就可 创建简易版本的vue项目——一下以封装form表单为例 vue init webpack-...

    初始化项目

    封装一个组件上传到npm上,页面需要只需要npm安装依赖就可
    创建简易版本的vue项目——一下以封装form表单为例

    	vue init webpack-simple Form_Demo
    

    在这里插入图片描述

    页面结构

    在这里插入图片描述

    在src文件下新建components文件夹,里面的MyForm就是我们封装的表单组件
    主要是components下的index.js文件,内容如下

    // 插件对应组件的名字
    import MyForm from './MyForm/index.vue'
    import Auto from './MyForm/components/a-auth.vue'
    import Button from './MyForm/components/a-button.vue'
    import Cascader from './MyForm/components/a-cascader.vue'
    import Checkbox from './MyForm/components/a-checkbox.vue'
    import Date from './MyForm/components/a-date.vue'
    import InputNumber from './MyForm/components/a-input-number.vue'
    import Radio from './MyForm/components/a-radio.vue'
    import Range from './MyForm/components/a-range.vue'
    import Select from './MyForm/components/a-select.vue'
    import Textarea from './MyForm/components/a-textarea.vue'
    import Time from './MyForm/components/a-time.vue'
    import Tooltip from './MyForm/components/a-tooltip.vue'
    import TreeSelect from './MyForm/components/a-tree-select.vue'
    
    export default MyForm
    export {
      Auto,
      Button,
      Cascader,
      Checkbox,
      Date,
      InputNumber,
      Radio,
      Range,
      Select,
      Textarea,
      Time,
      Tooltip,
      TreeSelect
    }
    
    

    此处我的封装为,导出全部form表单,和每个组件的单独导出。
    至此组件封装完成,然后进行打包

    npm run build 
    

    项目配置

    webpack.config.js文件配置
    一定要搞清你的项目文件位置

      entry: './src/components/index.js',
      output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'MyForm.js',
        library:'MyForm',
        libraryTarget:'umd',
        umdNamedDefine: true
      },
    

    package.js文件配置

    {
      "name": "form_demo_vue",  //这个名称就是你npm包的名称
      "description": "A Vue.js project",
      "version": "1.0.0",     //此处为npm版本号
      "author": "汪鑫 <>",
      "license": "MIT",
      "private": false, 	//这个要改为false
      "main": "dist/MyForm.js", //npm run build 后生成的dist文件下的js
      "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
      }
     }
    

    本地联调

    配置好,打包好的组件不着急发布,先在本地测试联调
    在组件项目Form_Demo下进行npm link生成本地测试地址
    在这里插入图片描述
    新建一项目npm link form_demo_vue 连接本地npm组件,form_demo_vue就是你npm包名
    在这里插入图片描述
    每次组件npm修改,直接npm run build 应用的demo项目中的npm组件就会更新
    启动项目 直至调试无误

    部署线上npm

    1.在npm官网注册账号,地址:https://www.npmjs.com/
    2.在组件npm项目npm logn 输入注册npm的用户名,密码,邮箱
    3.npm publish发布

    注:每次发布新版本都要更改版本号,否则会报错
    在这里插入图片描述

    项目使用

    直接在项目中npm i form_demo_vue 使用即可
    参考vue-swiper项目地址

    展开全文
  • Vue 封装组件

    2020-12-25 16:07:05
    目前已封装完成的组件: 按钮 Button 输入框 Input 单选框 Radio 开关 Switch 多选框 Checkbox 表单 Form 布局容器 Container 加载 Loading 图片 Image 消息提示 Message 导航菜单 NavMenu 文字提示 Tooltip 分割线...
    展开全文
  • vue封装radio组件

    2020-06-17 23:34:00
    一、组件的使用 <la-radio v-model="radioVal" ...二、组件封装 <div class="laRadio"> <span>{{name}}</span><input type="radio" :value="val" v-model="innerVal"> <

    一、组件的使用

    <la-radio
       v-model="radioVal"
       name="男"
       val="1"
    />
    data(){
      return {
        radioVal:'1'
      }
    },

    二、组件的封装

    <div class="laRadio">
        <span>{{name}}</span><input type="radio" :value="val" v-model="innerVal">
    </div>
    props:{
       value:null,
       name:null,
       val:null
    },
    computed:{
       innerVal:{
            get(){
               return this.value
            },
            set(value){
               this.$emit('input',value)
           }
       }
    }

    三、关键

    1、封装radio时,每一个input会绑定一个value属性;同一组input框的v-model会绑定同一个属性innerVal,发生改变后innerVal取到当前input的value值

    2、使用v-model实现组件间通讯时,在子组件中要完成获取父组件传值和设置父组件的值,要使用计算属性,并用get和set的方式设置属性

    四、另外

    1、v-model 会忽略所有表单元素的 valuecheckedselected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

    2、v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

    text 和 textarea 元素使用 value property 和 input 事件;

    checkbox 和 radio 使用 checked property 和 change 事件;

    select 字段将 value 作为 prop 并将 change 作为事件。

    展开全文
  • vue 封装input组件

    千次阅读 2019-09-25 10:02:23
    涉及到的知识点其实就是...第一步:在components目录下新建一个子组件(field.vue) <template> <div class="cell-wrapper" :class="showVerify ? 'include-verify flex-base' : ''" > <div cl...
  • Vue 项目封装表单类型组件 iform.vue 当我们在做Vue项目时,有时候项目很大,页面功能比较多时,很多控件堆在一起,很是臃肿,管理起来很麻烦。因此,我们就需要封装一些组件,达到简洁高效、可复用的效果。本章节...
  • vue 封装自定义组件

    2018-04-06 15:22:00
    创建组件.vue,其中props是该组件的属性配置项,data可以根据ref得到 表名" prop="name"> 表描述"> </el-form-item> 表类型"> 请选择"> v-for="item in tableTypeOptions" ...
  • v-bind="$attrs" 其实就是继承父亲传过来的属性, inheritAttrs:false 让根组件不要绑定这个属性
  • vue表单验证组件 v-verify-plugin
  • 前言: 在我们的项目开发中,经常需要封装一些自定义的表单组件来满足各种不同的表单提交需求, 并且通常会配合一些UI组件库写,提高开发效率。 这里讲一下使用elementUI时,封装v-model的组件遇到的问题。 这里就拿...
  • 封装表单组件

    2021-04-20 17:26:46
    封装表单组件 封装的表单,页面传值给组件组件,接受后循环判断渲染出想要的输入框和选择框 html写法 <div> <!-- 表单组件 --> <tuancu-kuang inline :formLabel="formLabel" :from="searchFrom">...
  • Vue封装input公共组件

    2021-09-06 15:17:48
    Vue封装input公共组件 最近呢有一个需求是很多个表单添加 编辑等操作 会用到很多input输入框 所以就想把input进行简单封装 提高一些复用率减少一些代码量 因封装没什么难度性 故直接贴上代码 做一些简单的注释 <...
  • 提交表单 点击运行,查看运行效果 为了方便修改、复用,样式比较简单。
  • type IFormType = 'input' | 'password' | 'select' | 'datepicker' export interface IFormItem { field: string type: IFormType label: string rules?...}
  • 封装switch组件 组件参数及事件 参数支持: 参数名 参数描述 参数类型 默认值 v-model 双向绑定 布尔类型 false name name属性 string text activeColor 自定义的激活颜色 ...
  • 在写这个的时候,还是不信邪的用了vue jsx的风格去写东西, 当组件的东西多了起来之后,各种报错;没错,最终我又回归到传统的写法; 上一篇写了个搜索的封装,到写这个的时候发现有所可以优化的地方。 效果图 ...
  • vue 封装组件 (例子table组件

    千次阅读 2020-04-28 11:14:40
    封装组件的步骤  建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。   准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。(后面详解)  准备好组件的数据输出。即根据组件...
  • vue封装数据加载组件

    2020-07-21 21:22:45
    根据输入内容,去后台查询相关数据,每次返回20条数据,...-- 这里使用的是mint ui里面的表单组件,也可以改成element ui的输入框组件或者表单组件 --> <mt-field v-model="name" :disabled="disabled" :label=
  • 封装Vue组件

    2020-12-10 20:53:45
    封装Vue组件 组件库开发 很多项目都会用到界面和功能相似的组件,为了能在不同项目中最大程度重用组件,所以会进行组件库开发,以提供不同项目基础的组件 开源组件库 Element-UI iView 组件驱动开发CDD ...
  • src/components/data/seller/create/contract.vue &lt;template&gt; &lt;create-portlet title="合同信息"&gt; &lt;j-form :model="model" ref="form"&...
  • 封装组件4个重要变量: columns:传入需要显示的列数组 options:设置table属性样式数组 operates:行数据操作按钮数组 pagination:分页数组 页面: <template> <div class="report-body"&...
  • Vue3-封装table组件

    2021-04-25 14:18:06
    在使用ant-design-vue中曾经使用过table组件,所以想着自己封装一个组件尝试一下,这是一个简易版本 1. 相关知识点 组件传值 插槽(具名插槽、作用域插槽) vue3 setup 2.封装组件,按照要求规定参数 封装一个名为...
  • vue 封装组件--可复用

    2021-04-21 16:26:49
    应项目需求,为避免代码重复,耦合性高,使用 vue + vant UI ...封装组件 html – headTips/index.vue <template> <div class="headTips"> <van-nav-bar :title="text" :left-arrow="shows"> <.
  • Vue表单组件

    2021-03-11 12:39:08
    一、表单  v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素。 <input v-model="message" placeholder="编辑我……"> <p>消息是: {{ message }}...
  • vue封装复选框组件

    千次阅读 2019-05-16 23:55:20
    根据百度前端技术学院2018 MVVM 学院中的 2.5 表单实现Input、Checkbox组件vue 实现的 checkbox复选框组件,使checkbox有三种状态: checked:ture (选中) / false (未选中) , indeterminate (部分选中) 1.利用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,847
精华内容 3,938
关键字:

vue封装表单组件

vue 订阅