Vue 구성 요소 Toast에서 표시 상자 효과를 구현하는 방법

이 글에서는 주로flexible 기반의 Vue 컴포넌트를 소개합니다: Toast - 디스플레이 박스 효과, 필요한 친구들은 참고하면 됩니다

flexible.js 기반의 Vue 컴포넌트

서문:

• 현재 보유 중 모바일 Vue 프로젝트는 Taobao의 lib-flexible을 사용하여 적용되었으며, px2rem을 사용하여 자동으로 rem으로 변환합니다. lib-flexible 및 px2rem을 구성하려면 vue-cli로 이동하여 유연하게 구성하세요.

• 적응을 위해 rem을 사용하기 때문에 기존의 많은 모바일 UI 프레임워크는 잘 협력하지 못하여 원래 사용 의도에서 벗어나 UI 프레임워크의 스타일을 변경해야 하는 경우가 많습니다. 신속한 개발을 달성하기 위한 UI 프레임워크.

• 향후 프로젝트에서 컴포넌트를 재사용하고 재사용 가능한 컴포넌트 개발 능력을 향상시키기 위해 일상 프로젝트에서 일반적으로 사용되는 간단한 컴포넌트를 분리했습니다.

• 초보자의 작품입니다. 코드 품질, 난이도, 재사용성 측면에서 대가들의 걸작에 비해 크게 뒤떨어집니다. 동시에, 진심으로 여러분의 의견과 제안을 부탁드립니다. 여러분의 의견은 매우 감사하겠습니다!

• GitHub 주소: vue-flexible-comComponents

Toast -- 표시 상자

효과 표시

코드 분석

p작은 아이콘 아이콘과 텍스트 설명이 포함되어 있습니다. 간단한 DOM 구조를 형성하고, props를 사용하여 변수 값을 정의하고, 계산된 속성을 사용하여 들어오는 값을 분해하고, 팝업 표시를 모니터링하고, 이를 .sync 수정자와 결합하여 양방향 데이터 바인딩을 달성하고 $를 사용합니다. 상위 구성 요소가 콜백을 수신할 수 있도록 상위 구성 요소에 이벤트를 전달합니다.

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>

props data

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

computed

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;
 }
 }
},

watch

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)
 }
 }
 }
}

사용 지침

구성 요소 주소: src/ 구성 요소/ast.vue로(npm 아님, 수동으로 다운로드하여 사용)

다운로드하여 자신의 프로젝트에 넣기 - 구성요소를 소개하기 위해 가져오기 - 구성요소에 구성요소 등록 -

props

사용

props	Description	Type	선택값	기본값
toastShow	디스플레이 상자를 표시하거나 숨길 수 있습니다. 자동으로 닫으려면 .sync 수정자를 추가해야 합니다. 자세한 내용은 예시를 참조하세요	Boolean	false true	false
message	프롬프트 메시지	String
iconClass	icon 작은 아이콘	String	성공 경고 close
iconImage	사용자 정의 작은 아이콘(그림은 필수로 가져와야 함)
duration	타이머(밀리초), 팝업 표시 시간 제어, 음수 Task	Number		1500
position	폭탄 위치(위부터)	String		'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中如何实现网页自动秒杀点击（详细教程）

위 내용은 Vue 구성 요소 Toast에서 표시 상자 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!