iview 的常见用法

博客介绍了iView中render函数因从其他组件引入导致this指向不正确的解决方法,包括创建window对象、在vue初始化参数赋值并在render函数中使用;还讲解了Vue $refs的基本用法,通过ref绑定可减少获取DOM节点的消耗。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、 iview中的render函数由于从别的组件中引入,所以this指向不正确问题解决方法

https://blog.youkuaiyun.com/weixin_34259559/article/details/88317407
1.1、首先在最外部创建一个window对象

window.selfs =  {};

1.2、在vue初始化参数上给他赋值

 created:function () {
        selfs = this;
    },

1.3、然后使用在render函数中

{title: '开关状态', key: 'kgzt',
            render: function (h, params) {
                return  h('i-switch',{
                        props: {
                            size: 'large',
                            value: params.row.kgzt=='1'?true:false
                        },
                        on: {
                            'on-change': function (flag) {
                                var id = params.row.id;
                                window.selfs.changeKgzt(flag,id);
                            }
                        }
                    },
                    [h('span',{slot: "open",domProps:{innerHTML:'启用'}}),
                        h('span',{slot: "close",domProps:{innerHTML:'禁用'}})
                    ]
                );
            }
        },

2、vue $refs的基本用法

<div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>
<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>

一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。

但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。

然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了

在iview的Table中添加Select(render)

https://blog.youkuaiyun.com/dead_rabbit6_0/article/details/79239206

### iView Slider 组件的使用说明 iView 是一个基于 Vue.js 的高质量 UI 库,提供了丰富的组件来帮助开发者快速构建用户界面。其中 `Slider` 组件用于实现滑块功能,允许用户通过拖动滑块选择数值范围内的某个值。 以下是关于 iView 中 `Slider` 组件的具体用法: #### 基本属性和方法 `Slider` 组件支持多种配置选项,常见的有以下几种: - **v-model**: 双向绑定当前选中的值。 - **min**: 设置最小值,默认为 0[^3]。 - **max**: 设置最大值,默认为 100[^3]。 - **step**: 定义步长,即每次移动的距离,默认为 1[^3]。 - **range**: 是否启用双滑块模式,适用于定义区间的选择[^3]。 - **show-stops**: 显示间断点标记[^3]。 下面是一个简单的代码示例展示如何初始化并使用该组件: ```vue <template> <div> <!-- 单滑块 --> <i-slider v-model="value1"></i-slider> <!-- 双滑块 --> <i-slider v-model="value2" range></i-slider> <!-- 自定义参数 --> <i-slider v-model="value3" :min="10" :max="90" :step="5"> </i-slider> </div> </template> <script> export default { data() { return { value1: 20, value2: [30, 70], value3: 40 }; } }; </script> ``` 上述代码展示了三种不同类型的滑块设置:单滑块、双滑块以及自定义参数下的滑块应用实例[^3]。 #### 高级特性 除了基本的功能外,还可以进一步增强用户体验,比如添加事件监听器或者动态调整样式等操作。例如当滑块改变时触发回调函数可以这样写: ```javascript <i-slider v-model="value" @on-change="handleChange"></i-slider> methods:{ handleChange(newValue){ console.log('The new selected value is:', newValue); } } ``` 此段脚本会在用户完成一次滑动动作之后打印最新的选定值到控制台中去[^3]。 ### 注意事项 在实际项目开发过程中需要注意版本兼容性问题,因为不同的框架版本之间可能存在API差异。另外也要考虑到移动端设备上的触摸体验优化等问题[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无极的移动代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值