<template> <div> <label>节标题文本</label> <validator> <div> <textarea placeholder="必填项，16字以内" v-model="text" v-validate:text="{ required: {rule: true,message: '请填写节标题文本'}, maxlength: {rule: 16,message: '节标题文本限制在16字以内'} }" @input="inputValue" @valid="onValid" @invalid="onInvalid" ></textarea> <div v-if="$titleValidator.text.required">{{$titleValidator.text.required}}</div> <div v-if="$titleValidator.text.maxlength">{{$titleValidator.text.maxlength}}</div> </div> </validator> </div> </template> <script> //导入action import {changeWidgetData, changeValidation} from '../../../store/actions' //导入mixin import editMixin from './mixin/editMixin' export default { name : "title_edit", mixins : [editMixin], props : { id : Number }, computed : { //mixin外的私有属性 text (){ for (let value of this.widgetDataArr) if (value.id == this.id) return value.text } }, methods : { //mixin外的私有方法 inputValue (e){ this.changeWidgetData(this.id, 'text', e.target.value) } }, vuex : { getters : { widgetDataArr : (state) => state.widgetDataArr }, actions : { changeWidgetData, changeValidation } } } </script> <style lang="stylus"> /*...*/ </style>
/** * editMixin.js * 编辑组件的mixin */ export default { data (){ return { //isValid : false } }, methods : { onValid (){ //验证通过 this.isValid = true this.changeValidation(this.id, true) }, onInvalid (){ //验证失败 this.isValid = false this.changeValidation(this.id, false) } } }
还有一些公共组件以及store等就不再介绍了，前面的讲解已基本包含，差不多就到这里了。最后完成后是这样的：
