Comment implémenter l'effet de boîte d'affichage dans le composant Vue Toast

Cet article présente principalement le composant Vue basé sur flexible : Toast - effet de boîte d'affichage, les amis qui en ont besoin peuvent se référer à

Composant Vue basé sur flexible.js

Avant-propos :

• Le projet mobile Vue actuel est adapté par lib-flexible de Taobao, et px2rem est utilisé pour le convertir automatiquement en rem . Pour la configuration de lib-flexible et px2rem, veuillez vous rendre sur vue-cli pour configurer flexible.

• En raison de l'utilisation de rem pour l'adaptation, de nombreux frameworks d'interface utilisateur mobile existants ne peuvent pas bien coopérer avec eux. Il est souvent nécessaire de faire de grands efforts pour changer le style du framework d'interface utilisateur, ce qui s'écarte de l'utilisation des frameworks d'interface utilisateur. Réaliser l'intention initiale de développement rapide.

• Afin de réutiliser les composants dans des projets futurs et d'améliorer la capacité de développer des composants réutilisables, nous avons isolé les composants simples et couramment utilisés dans les projets quotidiens.

• C'est le travail d'un novice En termes de qualité de code, de difficulté et de réutilisabilité, il est bien inférieur aux chefs-d'œuvre de tous les maîtres. Par la même occasion, je vous invite aussi sincèrement à me faire part de vos commentaires et suggestions, qui seront grandement appréciés !

• Adresse GitHub : vue-flexible-components

Toast -- Boîte d'affichage

Affichage des effets

Analyse du code

p comprend de petites icônes et des descriptions de texte, former une structure DOM simple, utiliser des accessoires pour définir des valeurs de variable, utiliser des propriétés calculées pour déconstruire les valeurs entrantes, surveiller l'affichage contextuel et le combiner avec le modificateur .sync pour obtenir une liaison de données bidirectionnelle et utiliser $ émettre vers le composant parent des événements Dispatch afin que le composant parent puisse écouter les rappels.

structure du dom

<transition name="fade">
 <p class="Toast" v-if="toastShow">
 <p
 class="box"
 :style="positionTop"
 >
 <span
 :class="iconClass"
 :style="iconBg"
 v-if="iconIsShow"
 ></span>
 <p
 v-if="message"
 >{{message}}</p>
 </p>
 </p>
</transition>

données des accessoires

props: {
 message: { // 提示内容
 type: String,
 },
 toastShow: { // 是否显示
 type: Boolean,
 default: false
 },
 iconClass: { // 背景图片
 type: String,
 },
 iconImage: { // 自定义背景图片
 },
 duration: { // 定时器
 type: Number,
 default: 1500
 },
 position: { // 弹出框位置
 type: String,
 default: '50%'
 }
},

calculées

computed: {
 // 用于判断显示框位置
 positionTop() {
 return {
 top: this.position
 }
 },
 // 自定义父组件传过来的背景图片
 iconBg() {
 if (this.iconImage) {
 return {
 backgroundImage: `url(${this.iconImage})`
 }
 } else {
 return;
 }
 },
 // 用于判断icon是否显示
 iconIsShow() {
 if (this.iconClass == 'success') {
 return true;
 } else if (this.iconClass == 'close') {
 return true;
 } else if (this.iconClass == 'warning') {
 return true;
 } else if (this.iconImage) {
 return true;
 } else {
 return false;
 }
 }
},

regarder

watch: {
 toastShow() {
 // 监听toast显示，向父组件派发事件
 if (this.toastShow) {
 if (this.duration < 0) {
 this.$emit(&#39;toastClose&#39;);
 } else {
 setTimeout(()=>{
  this.$emit(&#39;update:toastShow&#39;, false) // 利用了.sync达到双向数据绑定
  this.$emit(&#39;toastClose&#39;);
 }, this.duration)
 }
 }
 }
}

Instructions d'utilisation

Adresse du composant : src/components/Toast.vue (impossible npm , Il ne peut être téléchargé et utilisé que manuellement)

Téléchargez-le et placez-le dans votre propre projet - importez pour introduire les composants - enregistrez les composants dans les composants - utilisez

props

accessoires	Description	Type	Valeur facultative	Valeur par défaut
toastShow	Contrôlez la zone d'affichage pour l'afficher et la masquer. Le modificateur .sync doit être ajouté pour se fermer automatiquement, voir exemple	Boolean	false vrai	faux
message	Message d'invite	Chaîne
iconClass	icône petite icône	Chaîne	succès avertissement fermer
iconImage	Petite icône personnalisée (l'image doit être importée par require)
durée	Minuterie (millisecondes), contrôle la durée d'affichage de la fenêtre contextuelle, un nombre négatif signifie ne pas exécuter la tâche planifiée	Numéro		1500
position	Position de la bombe (à partir du haut)	Chaîne		'50%'

$emit

$emit	说明	参数
toastClose	弹框关闭回调

示例

// 默认效果，只有提示信息
 <toast
 message = &#39;默认信息&#39;
 :toastShow.sync = &#39;isShow1&#39; // 需添加.sync修饰符，才能达到自动关闭的效果，否则只能监听toastClose手动关闭
 ></toast>  // 关于sync的说明，请看官网（主要是为了达到双向数据绑定，子组件修改父组件状态）
 
 // 增加自带小图标
 <toast
 message = &#39;success&#39;
 iconClass = &#39;success&#39;
 :toastShow.sync = &#39;isShow2&#39;
 ></toast>
// 自定义类型
 <toast
 message = &#39;自定义&#39;
 position = &#39;70%&#39;
 :duration = &#39;-1&#39; //负数代表不执行定时任务，自己根据需要去关闭
 :iconImage=&#39;bg&#39; // 自定义icon小图标，在data中需require引入，看下面
 :toastShow = &#39;isShow5&#39; // 因为需要手动关闭，所以不需要.sync了
 @toastClose = &#39;isClose5&#39; // 监听回调，手动关闭，看下面
 ></toast>
 
 data() {
 return {
 this.isShow5 : true,
 bg: require(&#39;../assets/logo.png&#39;), // 图片必须用require进来
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何解决Router跨模块跳转问题

详细解读react后端渲染模板

在React中有关高阶组件详细介绍

在Javascript中如何实现网页抢红包

在JS中如何实现网页自动秒杀点击（详细教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!