ИзConfirmКомпоненты запускаются, шаг за шагом пишите подключаемый компонент.
Обработка обычного процесса оплаты (например, Alipay для покупки средств)
- Нажмите кнопку купить
- Если уровень риска не соответствует: всплывающее окно подтверждения (Подтвердить)
- После того, как пользователь подтвердит риск: всплывает всплывающее окно выбора способа оплаты (Диалог)
- После выбора способа оплаты: всплывающее окно вызывает проверку по отпечатку пальца (Диалог)
- Если проверка отпечатков пальцев отключена: Запрашивать ввод пароля (Диалоговое окно)
- Всплывающая клавиатура для ввода пароля (пользовательская клавиатура)
- Конечно, есть и сверхурочная работа над паролем.
- Если пароль введен неправильно, появится запрос на изменение/повторную попытку (Подтвердить)
- ... снова открыть клавиатуру
Около 6 всплывающих окон...
Товары в киосках (облегченная версия)
Сначала попробуйте реализовать как обычный зарегистрированный компонент
Confirmпройти черезv-model="isShow"Переключение дисплея через@onConfirmа такжеonCancelПолучение событий кликов.
код компонента
<template>
<div v-if="value">
<slot></slot>
<div>
<div @click="cancelHandler">{{cancelTxt}}</div>
<div @click="confirmHandler">{{confirmTxt}}</div>
</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false,
}
},
data() {
return {
content: '',
confirmTxt: '',
cancelTxt: '',
}
},
methods: {
close() {
this.$emit('input');
},
cancelHandler() {
this.$emit('onCancel');
},
confirmHandler() {
this.$emit('onConfirm');
}
}
}
</script>
использовать код
<confirm
v-model="isConfirmShow"
@onCancel="onCancel"
@onConfirm="onConfirm"
>内容部分</confirm>
Затем используйте его для выполнения вышеуказанных требований.
openRiskConfirm() {
this.isRiskConfirmShow = true;
},
onRiskCancel() {
this.isRiskConfirmShow = false;
},
onRiskConfirm() {
// something
this.openPaymeList();
},
openPaymeList() {
this.isPaymentListShow = ture;
}
// ... 巴拉巴拉
// ... 大约需要 3*6 = 18 个方法才能完成需求（其他请求类的还不算）
Если можно, но:
Так что, если надзор ослаблен и нет необходимости проверять риск? Или изначально риска проверки нет, и надзору вдруг приходится проверять риск? или неappИспользовать его без вызова отпечатка пальца? Или вы хотите добавить функцию распознавания лиц?
Изменить код будет катастрофой, потому что, даже если бизнес-код написан вами, вы можете не вспомнить процесс через некоторое время, и код, похоже, не имеет никакой преемственности и может только просматривать по одному.
Популярный (облегченный)
Для описанного выше бизнес-процесса попробуйте использовать более популярное всплывающее окно.
Компонент: изменить местоположение метода получения изpropsпомещать$dataсередина
<template>
<div>
<div>{{content}}</div>
<div>
<div @click="cancelHandler">{{cancelTxt}}</div>
<div @click="confirmHandler">{{confirmTxt}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
confirmTxt: '',
cancelTxt: '',
onConfirm: function() {},
onCancel: function() {},
}
},
methods: {
uninstall() {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
},
cancelHandler() {
(typeof this.onCancel === 'function') && this.onCancel()
this.uninstall();
},
confirmHandler() {
(typeof this.onConfirm === 'function') && this.onConfirm()
this.uninstall();
}
}
}
</script>
Зарегистрируйтесь в глобальном
import confirm from './confirm.vue'
export default {
install: function(Vue) {
const Profile = Vue.extend(confirm);
const PortfolioMsg = (options) => {
let $ele = document.createElement("div");
document.body.appendChild($ele);
new Profile({
data() {
return options;
}
}).$mount($ele);
};
Vue.prototype.$confirm = PortfolioMsg;
}
}
передача
this.$confirm({
content: '内容',
confirmTxt: '确定',
cancelTxt: '取消',
onConfirm: () => {
console.log('确定')
},
onCancel: () => {
console.log('取消')
}
})
Каково будет использовать его для выполнения вышеуказанных требований?
this.$confirm({
content: '风险认证',
cancelTxt: '再看看',
confirmTxt: '同意',
onConfirm: () => {
// something
this.$dialog({
content: '指纹认证',
slot: `<div>指纹认证</div>`,
onFinish: () => {
// 支付 成功? 失败?
// something
},
onCancel: () => {
// something
this.$confirm({
content: '密码认证',
cancelTxt: '取消',
confirmTxt: '确定',
onConfirm: () => {
// something
this.$keyboard({
// 略
onFinish: (password) => {
// 密码加密
// something
if (/* 密码错误？ */) {
// 重复了
// 这个代码就可以抽象成一个方法
this.$confirm({
content: '密码认证',
cancelTxt: '取消',
confirmTxt: '确定',
// 略
})
}
}
})
},
onCancel: () => {
// 取消
}
})
}
})
},
onCancel: () => {
// 取消
}
})
Это выглядит намного понятнее, и объем кода намного меньше Компоненты, которые не нужно регистрировать глобально, могут бытьmethodsМетод инкапсулирован в реализацию, что также гораздо удобнее в обслуживании. Но: есть ли ад обратного вызова? Это просто немного проще, вы можете оптимизировать его немного больше?
абстрактная версия
Обратный честный ад AJAX может быть пропущен черезPromiseРешено, можно ли также использовать описанный выше ад обратного вызова компонента?PromiseШерстяная ткань?
import confirm from './confirm.vue'
export default {
install: function(Vue) {
const Profile = Vue.extend(confirm);
const PortfolioMsg = (options) => {
let $ele = document.createElement("div");
document.body.appendChild($ele);
const profile = new Profile({
data() {
return options;
}
}).$mount($ele);
return new Promise((resolve, reject) => {
profile.$on('onConfirm', resolve)
profile.$on('onCancel', reject)
})
};
Vue.prototype.$confirm = PortfolioMsg;
}
}
используй это
this.$confirm({
confirmTxt: '确定'
}).then(res => {
console.log('点击了确定')
}).catch(res => {
console.log('点击了取消')
})
Тогда проблема ада обратных вызовов легко решается, читабельность очень высокая, добавление и удаление логики в середине также очень удобно, а стоимость обслуживания значительно снижается. Может быть лучше абстрагировать конкретный код самостоятельно.
Есть ли у вас другие способы упаковки? Пожалуйста, оставьте сообщение
наконец
Переводчик написал UI-библиотеку React + Hooks, которую удобно изучать и использовать всем.
Добро пожаловать, чтобы обратить внимание на общедоступную учетную запись «Продвинутый курс по интерфейсу», чтобы серьезно изучить интерфейс и продвигаться вместе.