改价-新增组件全选

ghsApp/src/components/module/allSelectInput.vue

@@ -0,0 +1,70 @@
+<style lang="scss" scoped>
+	.change-input {
+		position: relative;
+		width: 164px;
+		height: 60px;
+		line-height: 60px;
+		text-align: center;
+		background: #ffffff;
+		border: 1px solid #dddddd;
+		border-radius: 4px;
+		font-size: 25px;
+		input{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
+		text{
+			&.active{
+				background: rgba(10,150,210,0.6);
+			}
+		}
+	}
+</style>
+<template>
+	<view class="change-input">
+			<input :focus="isFocus" type="number" @focus="initAllInput" @blur="moveAllInput" v-model="inputVal" @input="changeAllInput" :placeholder="value==''&&inputVal==''?'自动调价':''">
+			<text :class="isActive?'active':''">{{value}}</text>
+	</view>
+</template>
+<script>
+export default {
+  name: "allSelectInput",
+	props: {
+		isActive: '',
+		isFocus: '',
+		value: '',
+	},
+	data() {
+		return {
+			inputVal:'',
+		};
+	},
+	onLoad(e){
+  	this.title = e.title
+	},
+  methods: {
+			initAllInput() {
+				this.$emit('initAllInput')
+    },
+			moveAllInput(){
+				let inputVal = this.inputVal
+				this.inputVal = '';
+				this.$emit('moveAllInput',inputVal)
+			},
+			changeAllInput(e){
+				console.log(e)
+    	if(e.detail.keyCode==8){
+    		this.$emit('deleteInputVal')
+						return;
+					}
+				this.$emit('deleteInputVal')
+				// else{
+					// 	this.$emit('enteringInputVal',e.detail.value)
+					// 	console.log(e.detail.value)
+					// }
+
+			},
+  },
+};
+</script>

ghsApp/src/components/module/app-commodity.vue

@@ -18,7 +18,10 @@
 					<i class="iconfont iconzeng" :class="addAnimationData?'animation':''" @click="addEvent"></i>
 				</view>
 				<view class="open-bx" v-else-if="type == COMMODITY_TYPE.CHANGE">
-					<input class="change-input" v-model="changeAutoPrice" type="digit" placeholder="自动调价"  selection-start="0" selection-end="1" />
+					<allSelectInput :isActive="isActive" :isFocus="isFocus" :value="changeAutoPrice"
+						@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput">
+					</allSelectInput>
+					<!--<input class="change-input" v-model="changeAutoPrice" type="digit" placeholder="自动调价"  selection-start="0" selection-end="1" />-->
 					<i :class="isShowSucceed?'position iconfont iconjihuo':'position'" ></i>
 					<view class="btn-box" @click="changePriceEvent">确定</view>
 				</view>
@@ -30,15 +33,17 @@
 <script>
 import { COMMODITY_TYPE } from "@/utils/declare";
 import AppImg from "@/components/app-img";
+import allSelectInput from "@/components/module/allSelectInput";
 import { autoPriceByIdApi, changePriceByIdApi } from '@/api/product/index'
 import productMins from "@/mixins/productContrapose";
 import animationMins from "@/mixins/animation";
+import allSelectInputMins from "@/mixins/allSelectInput";
 export default {
 	name: "Commodity",
 	components: {
-		AppImg
+		AppImg,allSelectInput
 	},
-	mixins: [productMins,animationMins],
+	mixins: [productMins,animationMins,allSelectInputMins],
 	props: {
 		info: {
 			required: true,

ghsApp/src/mixins/allSelectInput.js

@@ -0,0 +1,29 @@
+export default {
+	data() {
+		return {
+
+			isActive: false,
+			isFocus: false,
+		};
+	},
+
+	methods: {
+		// 离开全选input
+		moveAllInput(e){
+			this.isActive=false;
+			this.isFocus=false;
+			if(e==''){return}
+			this.changeAutoPrice = e;
+		},
+		//input点击删除按键
+		deleteInputVal(){
+			this.isActive=false;
+			this.changeAutoPrice = '';
+		},
+		// 选中input
+		initAllInput(){
+			this.isActive=true;
+			this.isFocus=true;
+		},
+	}
+};