vue.js 来回切换_vue.js的切换开关

vue.js 来回切换

vuejs切换开关 (vuejs-toggle-switch)

Toggle switch for vue.js.

切换vue.js。

View demo 查看演示 Download Source 下载源

Do you have questions or want a new feature? Use the "Issues" section :point_left:

您有疑问或想要新功能吗？ 使用“问题”部分：point_left：

建立 (Setup)

install:

安装：

npm install vuejs-toggle-switch --save

Import: (in your main.js)

导入：(在您的main.js中)

import ToggleSwitch from 'vuejs-toggle-switch'
Vue.use(ToggleSwitch)

用法 (Usage)

Use: (in your local .vue file/component, html section)

使用：(在本地.vue文件/组件中的html部分)

<toggle-switch
  :options="myOptions"
  @change="updateMap($event.value)" // This is optional
  @selected="selectedMethod()" // This is optional
  v-model="selectedMapOption" // This is optional 2-way binding (try not to use both 1-way and 2-way)
  :value="selectedMapOption" // This is optional 1-way binding (try not to use both 1-way and 2-way)
  :group="switchGroup" // This is optional, use if multiple toggle-switch on same page with same label names
  /> 

<!-- Options struct: -->
myOptions: {
  layout: {
    color: 'black',
    backgroundColor: 'lightgray',
    selectedColor: 'white',
    selectedBackgroundColor: 'green',
    borderColor: 'black',
    fontFamily: 'Arial',
    fontWeight: 'normal',
    fontWeightSelected: 'bold',
    squareCorners: false,
    noBorder: false
  },
  size: {
    fontSize: 14,
    height: 34,
    padding: 7,
    width: 100
  },
  items: {
    delay: .4,
    preSelected: 'unknown',
    disabled: false,
    labels: [
      {name: 'Off', color: 'white', backgroundColor: 'red'}, 
      {name: 'On', color: 'white', backgroundColor: 'green'}
    ]
  }
}

物产 (Properties)

Name	Type	Default	Description
width	Number	100	Width of labels
height	Number	34	Height
padding	Number	4	Adjust text location in label with this
backgroundColor	String	lightgray	Background color (not selected)
color	String	black	Text color (not selected)
borderColor	String	gray	border color
selectedColor	String	white	Text color selected label
selectedBackgroundColor	String	green	Selected label background color
fontFamily	String	Arial	Font of label text
fontWeight	String	normal	Font weight item (not selected)
fontWeightSelected	String	bold	Font weight selected item
fontSize	Number	14	Text size
disabled	Boolean	false	Disable switch
preSelected	String	On	Set (pre) selected label
labels	Array	Off/On	Labels for switch, name property is mandatory
value	String	n/a	Value, ie: v-model="selectedMapOption"
delay	Number	.4	Transition delay between labels is seconds
squareCorners	Boolean	false	Rounded corners of switch
noBorder	Boolean	false	Remove border
group	String	''	Switch key/group name (optional)

名称	类型	默认	描述
宽度	数	100	标签宽度
高度	数	34	高度
填充	数	4	使用此调整标签中的文本位置
背景颜色	串	浅灰	背景颜色(未选择)
颜色	串	黑色	文字颜色(未选中)
边框颜色	串	灰色	边框颜色
selectedColor	串	白色	文字颜色已选择标签
selectedBackgroundColor	串	绿色	所选标签的背景色
字体系列	串	Arial	标签文字的字体
fontWeight	串	正常	字体粗细项目(未选中)
fontWeightSelected	串	胆大	字体粗细选择项
字体大小	数	14	字体大小
残障人士	布尔型	假	禁用开关
预选	串	上	设置(预先)选择的标签
标签	数组	关/开	开关标签，名称属性是必需的
值	串	不适用	值，即：v-model =“ selectedMapOption”
延迟	数	.4	标签之间的转换延迟为秒
方角	布尔型	假	开关圆角
无边界	布尔型	假	移除边框
组	串	''	切换键/组名(可选)

Labels prop can be used with or without color and backgroundColor attr, if not used the common prop:
selectedColor and selectedBackgroundColor will be used for all labels.

如果不使用常用道具，则标签道具可以有或没有color和backgroundColor attr使用：
selectedColor和selectedBackgroundColor将用于所有标签。

大事记 (Events)

Name	Description
change	Triggered on toggle, user selects switch option, returns current value. @change="vmValueItem = $event.value"
selected	Triggered whenever user select switch item
input	Triggered on mount if preSelected is set or value is set, and on toggle/change

名称	描述
更改	触发切换，用户选择开关选项，返回当前值。 @ change =“ vmValueItem = $ event.value”
已选	每当用户选择开关项目时触发
输入	如果设置了preSelected或设置了值，则在安装时触发，并且在切换/更改时触发

翻译自: https://vuejsexamples.com/toggle-switch-for-vue-js/

vue.js 来回切换