[新增] 输入组件

刘汉宸
1 parent 18f0b61a
Showing 3 changed files with 103 additions and 2 deletions Show diff stats
components/button/index.scss
components/cell/index.scss
components/input/index.vue
@@ -68,6 +68,30 @@
 			border-color: lighten($color-primary, 40%);
 		}
 	}
+  &.plain {
+    &.primary {
+      color: $color-primary;
+      background-color: transparent;
+      &.active {
+      	background-color: rgba($color-primary, 0.1);
+      }
+    }
+    &.disabled {
+      background-color: rgba($bg-disabled, 0.1);
+    	color: $color-disabled;
+    	cursor: not-allowed;
+    	&.active {
+    		color: $color-disabled;
+        background-color: rgba($bg-disabled, 0.1);
+    		&, &::after {
+    			border-color: $bg-disabled;
+    		}
+    	}
+    	&, &::after {
+    		border-color: $bg-disabled;
+    	}
+    }
+  }
 	&.link {
 		padding: $h-gap-sm $v-gap-sm;
 		background: inherit;
@@ -76,6 +100,9 @@
 		&.active {
 			color: darken($color-primary, 5%);
 		}
+    &::after {
+      display: none;
+    }
 	}
 	&.disabled {
 		background-color: $bg-disabled;
@@ -39,19 +39,23 @@
 		color: $color-disabled;
 	}
 	&__title, &__value {
-		flex: 1;
 		display: flex;
 	}
 	&__title {
+    flex: auto;
 	  flex-direction: column;
 	  justify-content: center;
+    min-width: 150upx;
+    padding-right: 10upx;
+    box-sizing: border-box;
 	}
 	&__value {
+    flex: auto;
 	  align-items: center;
 	  justify-content: flex-end;
 		position: relative;
 		overflow: hidden;
-		color: $color-minor;
+		color: $color-text-minor;
 		text-align: right;
 		vertical-align: middle;
 		word-wrap: break-word;
@@ -0,0 +1,70 @@
+<template>
+  <view class="zui-input">
+    <input v-model="model" :type="type" :disabled="disabled" :placeholder="placeholder" placeholder-class="zui-input__placeholder" @input="onInput" />
+    <view v-if="clearable && model" class="zui-input__close" @click="onClear">
+      <zui-icon name="close"></zui-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+import ZuiIcon from '../icon/index.vue';
+
+export default {
+  components: {
+    ZuiIcon,
+  },
+  props: {
+    value: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    clearable: Boolean,
+    disabled: Boolean,
+  },
+  data: function() {
+    return {
+      model: this.value,
+    }
+  },
+  watch: {
+    value: function(val) {
+      this.model = val;
+    }
+  },
+  methods: {
+    onInput: function(e) {
+      const value = e.detail.value;
+      this.$emit('input', value);
+    },
+    onClear: function() {
+      this.model = undefined;
+      this.$emit('input', undefined);
+      this.$emit('clear');
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.zui-input {
+  display: flex;
+  width: 100%;
+  input {
+    flex: auto;
+    width: 100%;
+  }
+  &__placeholder {
+    color: $color-border;
+  }
+  &__close {
+    padding-left: $v-gap-sm;
+    color: $color-text-minor;
+  }
+}
+</style>
...	...	@@ -68,6 +68,30 @@
68	68	border-color: lighten($color-primary, 40%);
69	69	}
70	70	}
	71	+ &.plain {
	72	+ &.primary {
	73	+ color: $color-primary;
	74	+ background-color: transparent;
	75	+ &.active {
	76	+ background-color: rgba($color-primary, 0.1);
	77	+ }
	78	+ }
	79	+ &.disabled {
	80	+ background-color: rgba($bg-disabled, 0.1);
	81	+ color: $color-disabled;
	82	+ cursor: not-allowed;
	83	+ &.active {
	84	+ color: $color-disabled;
	85	+ background-color: rgba($bg-disabled, 0.1);
	86	+ &, &::after {
	87	+ border-color: $bg-disabled;
	88	+ }
	89	+ }
	90	+ &, &::after {
	91	+ border-color: $bg-disabled;
	92	+ }
	93	+ }
	94	+ }
71	95	&.link {
72	96	padding: $h-gap-sm $v-gap-sm;
73	97	background: inherit;
...	...	@@ -76,6 +100,9 @@
76	100	&.active {
77	101	color: darken($color-primary, 5%);
78	102	}
	103	+ &::after {
	104	+ display: none;
	105	+ }
79	106	}
80	107	&.disabled {
81	108	background-color: $bg-disabled;
...	...
...	...	@@ -39,19 +39,23 @@
39	39	color: $color-disabled;
40	40	}
41	41	&__title, &__value {
42		- flex: 1;
43	42	display: flex;
44	43	}
45	44	&__title {
	45	+ flex: auto;
46	46	flex-direction: column;
47	47	justify-content: center;
	48	+ min-width: 150upx;
	49	+ padding-right: 10upx;
	50	+ box-sizing: border-box;
48	51	}
49	52	&__value {
	53	+ flex: auto;
50	54	align-items: center;
51	55	justify-content: flex-end;
52	56	position: relative;
53	57	overflow: hidden;
54		- color: $color-minor;
	58	+ color: $color-text-minor;
55	59	text-align: right;
56	60	vertical-align: middle;
57	61	word-wrap: break-word;
...	...
...	...	@@ -0,0 +1,70 @@
	1	+<template>
	2	+ <view class="zui-input">
	3	+ <input v-model="model" :type="type" :disabled="disabled" :placeholder="placeholder" placeholder-class="zui-input__placeholder" @input="onInput" />
	4	+ <view v-if="clearable && model" class="zui-input__close" @click="onClear">
	5	+ <zui-icon name="close"></zui-icon>
	6	+ </view>
	7	+ </view>
	8	+</template>
	9	+
	10	+<script>
	11	+import ZuiIcon from '../icon/index.vue';
	12	+
	13	+export default {
	14	+ components: {
	15	+ ZuiIcon,
	16	+ },
	17	+ props: {
	18	+ value: String,
	19	+ type: {
	20	+ type: String,
	21	+ default: 'text'
	22	+ },
	23	+ placeholder: {
	24	+ type: String,
	25	+ default: '请输入'
	26	+ },
	27	+ clearable: Boolean,
	28	+ disabled: Boolean,
	29	+ },
	30	+ data: function() {
	31	+ return {
	32	+ model: this.value,
	33	+ }
	34	+ },
	35	+ watch: {
	36	+ value: function(val) {
	37	+ this.model = val;
	38	+ }
	39	+ },
	40	+ methods: {
	41	+ onInput: function(e) {
	42	+ const value = e.detail.value;
	43	+ this.$emit('input', value);
	44	+ },
	45	+ onClear: function() {
	46	+ this.model = undefined;
	47	+ this.$emit('input', undefined);
	48	+ this.$emit('clear');
	49	+ }
	50	+ }
	51	+}
	52	+</script>
	53	+
	54	+<style lang="scss">
	55	+.zui-input {
	56	+ display: flex;
	57	+ width: 100%;
	58	+ input {
	59	+ flex: auto;
	60	+ width: 100%;
	61	+ }
	62	+ &__placeholder {
	63	+ color: $color-border;
	64	+ }
	65	+ &__close {
	66	+ padding-left: $v-gap-sm;
	67	+ color: $color-text-minor;
	68	+ }
	69	+}
	70	+</style>
...	...