element-ui el-input 中的clearable和readonly两者同时使用

element-ui el-input 中的clearable和readonly两者同时使用

element-ui el-input 中的clearable和readonly不能同时使用
个人觉得clearable属于编辑功能,readonly属于禁止编辑,从逻辑角度来讲这俩属性肯定不能共存。那么偏要两个共存怎么办?上代码

<el-input
  v-model="value"
  placeholder="请输入"
  :readonly="true"
   > 
   //slot="suffix"重点  btnClearable事件,value有值就显示没有值就隐藏
   <span slot="suffix" v-show="value" @click="btnClearable">
     <i class="el-icon-close" style="margin-left: 5px;cursor: pointer;"></i>
  </span>
 </el-input>
 //css
 .el-icon-close:before {
   content: "\E78D";
 }

前端交流群: Q 306671879

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
您可以使用Element-UI提供的Icon组件来实现在Vue2选择图标的功能。首先,您需要安装Element-UIVue2。然后,您可以按照以下步骤进行操作: 1. 导入所需的Element-UI组件和样式: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 2. 在Vue组件使用Form表单,并添加一个表单项用于选择图标: ```html <template> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="选择图标"> <el-input v-model="icon" placeholder="请选择图标" readonly @focus="showIconSelector"></el-input> </el-form-item> </el-form> </template> ``` 3. 在Vue组件的`data`定义`icon`和`form`变量,并创建一个方法用于显示图标选择器: ```javascript export default { data() { return { icon: '', form: { // 其他表单项 } }; }, methods: { showIconSelector() { // 在此处显示图标选择器的逻辑 } } } ``` 4. 在`showIconSelector`方法,您可以使用Element-UI提供的Dialog组件来显示一个弹窗,其包含可供选择的图标列表: ```javascript showIconSelector() { this.$prompt('请选择图标', '选择图标', { distinguishCancelAndClose: true, confirmButtonText: '确定', cancelButtonText: '取消', customClass: 'icon-selector-dialog', showClose: false, inputPattern: /^el-icon-[\w-]+$/, inputErrorMessage: '请输入正确的图标类名' }).then(({ value }) => { this.icon = value; }); } ``` 注意:上述代码的`icon-selector-dialog`是一个自定义的CSS类,您可以根据需要进行修改。 5. 最后,您可以在`showIconSelector`方法调用一个图标选择器组件,例如[iconSelector](https://github.com/Armour/vue-icon-selector)组件,以便用户可以在弹窗选择图标。 这样,您就可以在Vue2使用Element-UI的Form表单实现选择图标的功能了。希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值