精华内容
下载资源
问答
  • 错误示范:更改状态后,Switch以下的其他组件也被重置,错误示范:正确代码: 用Switch时,怎么都改不了状态;要么就是切换页面时,再回本页,选择的不见了;还有,切换Switch时,怎么把其他表单项给重置了呢? ...


    用Switch时,怎么都改不了状态;要么就是切换页面时,再回本页,选择的值不见了;还有,切换Switch时,怎么把其他表单项给重置了呢?
    重点:使用setFieldsValue更改取值;使用defaultChecked确定默认值。

    看下错误代码,你是否犯过该类问题呢?如果有其他问题,欢迎评论区留言,一起讨论。

    不能更改状态?错误示范:

    this.state={
    	show:false
    }
    <Form.Item wrapperCol={{ span: 4 }} label="是否启用">
         {getFieldDecorator('show', {
            initialValue: this.state.show,
            rules: [{ required: true, message: '请选择!' }],
          })(
            <Switch
              onChange={(e) => {
                setFieldsValue({ show: e });
              }}
              // 不可!!!
              checked={this.state.show}
            />
          )}
    </Form.Item>
    

    以上代码使用了checked,会导致点击失效,切换不了状态!个人理解的原因是:页面初始化state值是false,checked指定了为false。
    switch按钮

    更改状态后,Switch以下的其他组件也被重置,错误示范:

    这里使用了state设置和取值。
    这里的switchChecked是定义的是否选中的状态。看具体逻辑。
    用了state设置

    正确代码:

    this.state={
    	show:false
    }
    <Form.Item wrapperCol={{ span: 4 }} label="是否启用">
         {getFieldDecorator('show', {
            initialValue: this.state.show,
            rules: [{ required: true, message: '请选择!' }],
          })(
            <Switch
              onChange={(e) => {
                setFieldsValue({ show: e });
              }}
              defaultChecked={this.state.show}
            />
          )}
    </Form.Item>
    

    之后就可以随意开关了,取值也没问题。

    展开全文
  • 场景:子组件通过props获取组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。比如想实现一个switch开关按钮的公用组件:1.父组件可以向按钮组件传递默认值。2.子组件的操作可以改变父组件的数据。3...

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。

    场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。

    比如想实现一个switch开关按钮的公用组件:

    1.父组件可以向按钮组件传递默认值。

    2.子组件的操作可以改变父组件的数据。

    3.父组件修改传递给子组件的值,子组件能动态监听到改变。

    比如父组件点击重置,开关组件的状态恢复为关闭状态:

    方法1:

    1、因为存在子组件要更改父组件传递过来的数据,但是直接操作props里定义的数据vue会报错,所以需要在data里重新定义属性名并将props里的数据接收。

    2、首先想到的肯定是在computed计算属性里监听数据的变化,那就直接在computed里监听父组件传递过来的props数据的变化,如果有变动就进行操作,如:

    export default{

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    data () {return{

    switchStatusData:this.status //重新定义数据

    }

    },

    computed: {

    switchStatus:function() {return this.status //直接监听props里的status状态

    }

    }

    }

    }

    这样就可以在使用switchStatus的地方动态的监听到父组件status的变化。似乎只针对简单的数据类型有效。

    方法2:

    使用watch和computed组合实现:如

    export default{

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    data () {return{

    switchStatusData:this.status

    }

    },

    computed: {

    switchStatus:function() {return this.switchStatusData //监听switchStatusData 的变化

    }

    },

    watch: {

    status (newV, oldV) {//watch监听props里status的变化,然后执行操作

    console.log(newV, oldV)this.switchStatusData =newV

    }

    },

    methods: {

    switchHandleClick () {this.switchStatusData = !this.switchStatusDatathis.$emit('switchHandleClick', this.switchStatusData)

    }

    }

    }

    下面是实现该组件的代码:

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    computed: {

    switchStatus:function() {return this.status

    }

    },//watch: {

    //status (newV, oldV) {

    //console.log(newV, oldV)

    //this.switchStatusData = newV

    //}

    //},

    methods: {

    switchHandleClick () {constswitchStatusData = !this.switchStatusthis.$emit('switchHandleClick', switchStatusData)

    }

    }

    }

    line-height: .8rem;

    padding:0.4rem;

    .switch

    float: right;

    font-size: 0;

    .switch-bar

    position: relative;

    display: inline-block;

    width: .8rem;

    height: .4rem;

    border-radius: .4rem;

    background: #ddd;

    border: 2px solid #ddd;

    vertical-align: middle;

    transition: background .3s, border .3s;&.active

    background: $bgColor;

    border: 2px solid $bgColor;

    .switch-btn

    left: .4rem;

    background: #fff;

    .switch-btn

    position: absolute;

    left: 0px;

    display: inline-block;

    width: .4rem;

    height: .4rem;

    border-radius: .2rem;

    background: #fff;

    transition: background .3s, left .3s;

    展开全文
  • 目录Switch组件创建Switch组件 Switch组件 对于这个组件,Android开发并没有直接提供,但IOS开发中是有UISwitch的。鸿蒙的Switch组件与它的效果差不多。 本篇,将详细介绍Switch组件的使用规则。 创建Switch组件 ...

    Switch组件

    对于这个组件,Android开发并没有直接提供,但IOS开发中是有UISwitch的。鸿蒙的Switch组件与它的效果差不多。

    最终效果
    本篇,将详细介绍Switch组件的使用规则。

    创建Switch组件

    首先,我们通过XML布局文件来创建一个Switch组件。示例代码如下:

    <Switch
        ohos:id="$+id:test_switch"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="20vp"
        ohos:height="60vp"
        ohos:width="120vp"
        ohos:text_state_on="开启"
        ohos:text_state_off="关闭"
        ohos:text_size="20vp"
        ohos:marked="false"/>
    

    运行之后,交互效果如下:
    效果
    这里,有几个属性需要注意:

    属性含义
    text_state_on开启按钮时的文字
    text_state_off关闭按钮时的文字
    marked默认按钮是开启还是关闭
    track_element轨迹样式
    thumb_elementthumb样式
    check_element状态标志样式

    用代码设置其交互样式

    这里,我们可以直接通过graphic的shape文件设置后面这3个样式属性。但因为这个组件功能简单,我们来详细通过代码实现样式交互。

    示例如下:

    public class MainAbilitySlice extends AbilitySlice{
        private Switch aSwitch;
        HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
            this.aSwitch=(Switch)findComponentById(ResourceTable.Id_test_switch);
            // 开启状态下滑块的样式
            ShapeElement elementThumbOn = new ShapeElement();
            elementThumbOn.setShape(ShapeElement.OVAL);
            elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
            elementThumbOn.setCornerRadius(50);
            // 关闭状态下滑块的样式
            ShapeElement elementThumbOff = new ShapeElement();
            elementThumbOff.setShape(ShapeElement.OVAL);
            elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
            elementThumbOff.setCornerRadius(50);
            // 开启状态下轨迹样式
            ShapeElement elementTrackOn = new ShapeElement();
            elementTrackOn.setShape(ShapeElement.RECTANGLE);
            elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
            elementTrackOn.setCornerRadius(50);
            // 关闭状态下轨迹样式
            ShapeElement elementTrackOff = new ShapeElement();
            elementTrackOff.setShape(ShapeElement.RECTANGLE);
            elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
            elementTrackOff.setCornerRadius(50);
            //设置轨迹交互样式
            this.aSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
            //设置滑块交互样式
            this.aSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));
        }
    
        private StateElement trackElementInit(ShapeElement on, ShapeElement off){
            StateElement trackElement = new StateElement();
            trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
            trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
            return trackElement;
        }
        private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {
            StateElement thumbElement = new StateElement();
            thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
            thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
            return thumbElement;
        }
    }
    

    运行之后,效果如首图所示。

    监听事件

    Switch组件大多用于App的设置当中,一般都只有两个选择。所以,我们需要监听其到底是开启还是关闭。

    示例代码如下:

    this.aSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
        // 回调处理Switch状态改变事件
        @Override
        public void onCheckedChanged(AbsButton button, boolean isChecked) {
    
        }
    });
    

    这里的isChecked值,就能获取到Switch组件的选择状态,然后再做进一步的操作。

    展开全文
  • what编程语言里面,除了使用 if 语句来做条件...这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件以终为始先来看看我们希望用户是如何使用 Switch 的用 js 的方式来对比一下:用户可以通过一个 VSwitch 组...

    what

    编程语言里面,除了使用 if 语句来做条件判断,还有另外一个常用的就是 switch 了。

    而在 vue 中,官方已经帮助我们实现了 v-if 这个指令,但是还没有 switch ,那我们能不能自己实现一个呢?

    这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件

    以终为始

    先来看看我们希望用户是如何使用 Switch 的

    用 js 的方式来对比一下:

    用户可以通过一个 VSwitch 组件来应用 switch 功能

    通过 case 来确定匹配的条件

    然后每一个 case 匹配的条件用 template 来表示

    这样我们已经规定好用户该如何使用了,剩下的其实就是实现了

    这一步背后的思想就是确定组件的规格,也可以说是确定组件的使用接口

    how

    那么我们应该如何实现呢?

    我们先来思考一下 switch 的功能

    拆分 Switch 功能

    某个等于 case 值的那个模板显示,别的都不应该显示

    举个栗子:

    case = "xiaohong" 时

    那么就只能显示名字为 "xiaohong" 的插槽

    如果没有匹配到任何一个 case ,并且还有 defalut 插槽时,显示 defalut 插槽

    当然,switch 还有更复杂的功能,我们这里先从最核心的功能入手,慢慢在复杂化(迭代思想)

    实现原理

    首先我们必须先知道该组件的 slots,都有哪些

    在 vue3 中,我们只需要通过以下方式就可以轻松获取 slots

    setup(props,{slots}){

    console.log(slots)

    }

    如果打印 slots 的话,你会发现可以得到一个对象,而 key 的值就是 slot 的名称,而 value 是一个函数,调用这个函数就可以获取到对应的 vnode。

    那比如我想显示 xiaohei 这个插槽要怎么做呢?

    只需要这样

    setup(props, { slots }) {

    return () => {

    return slots.xiaohei()

    };

    },

    setup 除了可以返回一个对象,作为导出给 template 用的数据,还可以直接返回一个函数作为 render。

    而 render 函数只要返回对应的 vnode ,那么最终就会被渲染到 view 上。

    所以按照上面代码的写法的话最终会显示 xiaohei slot 内部的内容

    那当明白上述知识点后,我们在回来看看第一个功能

    是不是只要我们把和 case 匹配的 slots 渲染出来即可

    看代码:

    export default {

    props: ["case"],

    setup(props, { slots }) {

    console.log(slots);

    return () => {

    if (slots[props.case]) {

    return slots[props.case]();

    }

    };

    },

    };

    注意哦,一定要加条件判断,因为很有可能是没有对应的 slot 的

    看,懂了原理之后是不是很轻松的实现第一个功能了。

    我们在来看第二个功能的时候是不是也很简单了

    只需要在加一段代码即可:

    export default {

    props: ["case"],

    setup(props, { slots }) {

    console.log(slots);

    return () => {

    if (slots[props.case]) {

    return slots[props.case]();

    }

    if (slots["default"]) {

    return slots["default"]();

    }

    };

    },

    };

    如果在第一个条件那没有匹配到的话,肯定会到达第二个条件判断,也就是 if (slots["default"])

    接着就是如果有 default slot 的话,那么就返回即可

    至此,你已经实现了一个简单的 Switch 功能组件了

    总结

    让我们来总结总结你已经学到了哪些知识点

    设计组件时,先设计该组件的规则(接口)

    tasking 的思想,把大功能拆小,然后逐一击破

    在 vue3 中获取 slots 的方式

    setup 不止可以返回对象,还可以返回一个函数,效果同 render 函数一样

    render 函数返回的 vnode 最终会被渲染到 view 上

    如果你学到的话,那么请用你的小手点个赞呗~~~

    完整代码

    // VSwitch.vue

    export default {

    props: ["case"],

    setup(props, { slots }) {

    return () => {

    if (slots[props.case]) {

    return slots[props.case]();

    }

    if (slots["default"]) {

    return slots["default"]();

    }

    };

    },

    };

    扩展思考

    那其实这里实现的 switch 功能并不完整,如果说用户匹配满足多个条件呢?并且没有 break,那么我们是不是应该把匹配到的 template 都显示出来呢?

    自己尝试一下实现看看?

    到此这篇关于vue3中轻松实现switch功能组件的文章就介绍到这了,更多相关vue3实现switch功能组件内容请搜索云海天教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持云海天教程!

    展开全文
  • 问题 由于mysql数据库没有Boolean类型,他将Boolean作为tinyint(1)... true:false使用后switch能显示正确状态,但不能拖动. 解决方案 查阅element-ui官方文档,发现有两个属性可以解决: 参数 说明 类型 可选 默认值
  • 这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件 以终为始 先来看看我们希望用户是如何使用 Switch 的 用 js 的方式来对比一下: 用户可以通过一个 VSwitch 组件来应用 switch 功能 通过 case 来确定...
  • 利用 ref 和 $refs 可以用于获取 dom 元素, 或者组件实例 ref="xxxxx" 比如说这个绑定到了一个组件上 this.$refs.xxxxx console.log(this.$refs.xxxxx ) 通过这种方式就可以直接拿到在那个组件中定义的 主要是...
  • 由于没有数据双向绑定,在 使用表单的时候,就需要自己一个一个的绑定,获取值的时候,也去要一个一个的去状态里面拿,想在点击提交按钮 把表单中的所以=有数据获取到,一般都是 使用 antd 中的 Form 组件,...
  • 之后形成了refs的组件集合 添加监视可以获取当前的refs集合中包含表单ruleForm及cascaderAddr 两个组件集合 下拉框所选择value =v-model="ruleForm.productKind" 可以获取 或者使用var text=this.$refs['...
  • 我们可以通过PackageManager获取PackageInfo,既而获得应用包相关的各种信息,除了之前说过的可以获取包名、版本号、图标、入口Activity、Application、文件md5/sha1/sha256等等,我们还可以获取应用的四大组件列表...
  • //客户端index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';...import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'import reg...
  • } 3、Switch组件 该组件只会渲染第一个被匹配的组件 没有指定path的路由组件放在最后,当前面路由都不满足条件时才去匹配它 src/view/error.js import React from 'react'; export default function PageError(){ ...
  • 1.安装vuecli脚手架2.终端输入cnpm i element-ui -S安装element-ui3.按需引入select组件在main.js中写入如下代码/* 导入第三方库开始 */...// 按需加载Select组件import {Select,Option,Dialog,Button} from 'el...
  • 效果最终效果就是这个样子:HTML代码HTML代码结构如下:其中,文字采用:...CSS代码以下代码放在名为jquery.simpleSwitch.css的文件中:/*** 简单的开关插件* @date 2016-06-25*/.simple-switch {width: 70px;he...
  • el-switch v-model="value" :active-value="1" :inactive-value="0" @change="onChange" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </div> </template> .
  • 在react-router里面,如果组件是通过路由跳转的,那么它会把路由相关的API挂在了组件的props上(vue-Router使用的router和router和router和route),并且分为history,location,match。 history:历史,用来跳转的...
  • Switch赋初始无效 # 解决方案: let newCheck = {}; if (propsForm.type === 'switch') { newCheck = { ...newCheck, valuePropName: "checked" } } <Form.Item key={propsFo
  • 1,radio分组只要name一样,就是一组的,即一组中只能选择一个,如下:代码如下:group1:radio1radio2radio3group2:radio4radio5radio6效果如下:2,获取选中的radio节点使用jquery可以很方便做到,先选择group,然后...
  • 前端组件化开发实践总结

    千次阅读 多人点赞 2021-10-13 12:46:52
    自从 2010 年第一份工作接触了前后端半分离的开发方式之后,在后面的这些年里,对前端的组件化开发有了更全面一点的认识,组件化在我们的前端开发中,对提高开发效率、代码的可维护性和可复用性有很大帮助,甚至对跟...
  • 动态创建组件这篇文章我们将介绍在 Angular 中如何动态创建组件。定义 AlertComponent 组件首先,我们需要定义一个组件。exe-alert.component.tsimport { Component, Input } from '@angular/core';@Component({...
  • 主要实现的功能​排序、分页、过滤、自定义操作列、列表中根据数据展示相应图标、跳转详情页​组件继承思想​封装一个列表基类,派生类继承该类,复用基类的功能。Constructor 构造函数​如果派生类未声明构造函数,...
  • 3: 所有的在C组件提交,调接口 4:接口成功需关闭第二个弹窗(在B组件中关闭),且把列表(A组件)更新(刷新) 这里就涉及到了子组件向父级组件传值的问题: 接口成功之后需要关闭第二个弹窗,那么这里就需要C...
  • 函数组件路由和组件路由SPASPA的切换机制前端路由React Router安装组件...高阶函数,高阶路由)Switch 组件Redirect 组件hooks (*Router5.0之后出现的*)路由参数history :历史记录以及路由给我们提供的一些操作loc
  • 以此类推 switch (value) { case 0: print("第1页"); break; case 1: print("第2页"); break; case 2: print("第3页"); break; case 3: print("第4页"); break; //如果只设置的了4项,而代码中有第五个,是调用不到...
  • C++和蓝图

    2021-01-26 18:42:26
    这意味着在蓝图图表中可以创建节点来获取及设置 DesiredBrightness 的。请参照 我的蓝图 文档来获得一般的应用信息。 默认情况下,可能不会显示父类LightSwitchBoth的组件和属性。因为当选中 我的蓝图 选卡底部的 ...
  • vue组件间的参数传递

    2021-03-14 22:44:10
    场景分析在前端开发中,我们常常会运用到“组件库”...举例说明例如:element-ui组件库中使用switch开关,有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。v-model="value":active-colo...
  • 用同一个回调函数switch组件状态发生变化时需要知道它目前开关状态需要知道当前是哪个switch问题描述按照官方文档对switch事件的描述事件名称说明回调参数changeswitch 状态发生变化时的回调函数新状态的下面这样...
  • 理论上当我更新数据的时候,createDate的已经发生了改变,子组件应该获取的数据更新并重新渲染。实际上该页面的子组件只会保留第一次界面初始化的渲染页面。 修改前: <i-table width="100%" border ref=...
  • React 路由组件 详解

    2021-10-22 21:11:21
    文章目录路由组件1、HashRouter和BrowserRouter2、Route3、Router4、Link和NavLink5、Redirect6、Switch7、withRouter嵌套路由向路由组件传递参数路由跳转的两种模式编程式路由导航Router Hooks 路由组件 路由组件与...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,138
精华内容 20,855
关键字:

获取switch组件的值