一對一聊天原始碼,vue實現環形進度條元件
一對一聊天原始碼,vue實現環形進度條元件的相關程式碼
<template> <div @click="togglePlaying"> <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns=" <circle r="50" cx="50" cy="50" fill="transparent"></circle> <circle r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"//dashArra表示圓環的周長 :stroke-dashoffset="dashOffset"></circle><!-- fill是背景顏色,不是邊框 --> </svg>//dashOffset是圓環進度,dashOffset等於周長時進度為0,dashOffset等於0時進度100% <slot></slot>//預設插槽,可以填充一個圖示。比如我在音樂專案中插入一個三角圖示 </div> </template> <script type="text/ecmascript-6"> const r = 50 export default { props: { radius: { type: Number, default: 100 }, percent:{ type:Number, default:0 } }, data() { return { } }, components: {}, methods: { togglePlaying(){ this.$emit('click') } }, mounted() {}, computed:{ dashArray(){ return 2*r*3.14 }, dashOffset(){ return (1 - this.percent)*this.dashArray } }, created() {}, watch: {} } </script> <style scoped rel="stylesheet/stylus"> @import '../../common/stylus/variable' .progress-circle position: relative width 100% height 100% svg position absolute top 40% left 50% z-index 10 transform translate(-50%,-50%) circle position absolute stroke-width: 8px transform-origin: center//旋轉軸點,這裡設定為中心點 &.progress-background transform: scale(0.9)//&表示應用父元素,這裡可理解為一種"&&" stroke: $color-theme-d &.progress-bar transform: scale(0.9) rotate(-90deg)//rotate作用是使進度從正上方開始 stroke: $color-theme </style>
以上就是一對一聊天原始碼,vue實現環形進度條元件的相關程式碼, 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2857431/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 實現環形進度條效果【一】
- 直播商城系統原始碼,環形進度條元件原始碼元件
- 手把手教你實現一個 Vue 進度條元件!Vue元件
- 直播電商平臺開發,環形進度條元件元件
- canvas環形進度條效果Canvas
- php 聊天一對一聊天功能原始碼PHP原始碼
- Android自定義圓形進度條實現程式碼Android
- 【UWP】實現一個波浪進度條
- [-Flutter 自定義元件-] 圓形進度條Flutter元件
- JavaScript 原生實現進度條元件.mdJavaScript元件
- 一對一聊天ajax實現
- 一對一聊天平臺原始碼,實現冪等的8種方案原始碼
- Android自定義圓形進度條原始碼解析Android原始碼
- 用初中數學知識擼一個canvas環形進度條Canvas
- Android自定義控制元件實現一個帶文字與數字的圓形進度條Android控制元件
- 直播網站原始碼,Canvas實現圓形時間倒數計時進度條網站原始碼Canvas
- canvas百分比環形進度條程式碼Canvas
- 自定義圓形進度條控制元件控制元件
- Android自定義控制元件系列之圓形進度條的實現Android控制元件
- Android開發自定義控制元件實現一個圓形進度條【帶數值和動畫】Android控制元件動畫
- 直播平臺搭建原始碼,canvas 畫一條波浪線 進度條原始碼Canvas
- Android花樣loading進度條(三)-配文字環形進度條Android
- Laravel + swoole + redis 實現一對一聊天LaravelRedis
- jQuery環形旋轉載入進度條效果jQuery
- svg環形百分比進度條SVG
- vue 高德地圖實現進度條軌跡回放Vue地圖
- Java 條形碼生成(一維條形碼)Java
- 一對一聊天軟體原始碼,實現各個子介面跳轉和傳參原始碼
- 可拖拽圓形進度條元件(支援移動端)元件
- Android:藍芽實現一對一聊天Android藍芽
- Vue canvas繪製圓形進度條動畫載入VueCanvas動畫
- canvas環形百分比進度條效果Canvas
- 新環境下的一對一直播原始碼如何實現夢想原始碼
- 用Vue實現一款屬於自己的樹形元件Vue元件
- Vue原始碼學習(十八):實現元件註冊(一)Vue.component()和Vue.extend()Vue原始碼元件
- 實現一個協程帶進度條下載器
- 直播帶貨平臺原始碼,利用ProgressBar實現垂直、水平進度條原始碼
- Flutter 波浪圓形進度條Flutter