cu-progress.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707
  1. <template>
  2. <view>
  3. <view class="cu-progress-main" :style="{'border-radius':bgBR,'width': progressMainW,'height': '22rpx','background-color': backgroundColor}">
  4. <view class="cu-progress" :style="{'left':areaLeft, 'flex-direction':flexDirection,'width':areaW,height:areaH}">
  5. <view class="cu-progress-bar" :style="{'bottom':pgBarBottom,'background':pgBarBg,'margin-left':pgBarML, 'margin-bottom':pgBarMB,'width': pgBarW,'height':pgBarH,'border-radius':pgBarBR,'background-color':noActiveColor}"></view>
  6. <view class="cu-progress-node">
  7. <text
  8. :class="['node-item' , showValue >= 0 ? 'active-node-item' : '' , showValue == 0 ? 'now-item' : '' ]"></text>
  9. <text
  10. :class="['node-item' , showValue >= 25 ? 'active-node-item' : '' , showValue == 25 ? 'now-item' : '' ]"></text>
  11. <text
  12. :class="['node-item' , showValue >= 50 ? 'active-node-item' : '' , showValue == 50 ? 'now-item' : '' ]"></text>
  13. <text
  14. :class="['node-item' , showValue >= 75 ? 'active-node-item' : '' , showValue == 75 ? 'now-item' : '' ]"></text>
  15. <text
  16. :class="['node-item' , showValue >= 100 ? 'active-node-item' : '' , showValue == 100 ? 'now-item' : '' ]"></text>
  17. </view>
  18. <movable-area class="cu-area" :style="{'flex-direction':flexDirection,'width':areaW,height:areaH}" @touchcancel="touchCancel" @touchstart="areaTouchStart"
  19. @touchmove="areaTouchMove" @touchend="touchEnd">
  20. <movable-view class="cu-handle" disabled="disabled" :animation="false" :style="{ 'top':handleT, 'width':handleS,'height':handleS,'border-radius': handleBR,'background-color':handleColor}"
  21. @change="change" :damping="damping" :x="handleX" :y="handleY" :direction="direction == 'vertical' ? 'vertical' : 'horizontal'">
  22. <text :class="handleIcon" :style="{'backgroundColor':iconColor,'font-size':iconS,'border-radius':iconBR}"></text>
  23. </movable-view>
  24. </movable-area>
  25. </view>
  26. <text v-if="getShowInfoStatus2view" class="cu-showInfo" :style="{'right':infoRt, 'left':infoLt, 'color':infoColor,'font-size':infoS,width:infoW}">{{showValue}}{{infoEndText}}</text>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. scale: 1,
  35. percent: 0, // progress进度
  36. // pgbw: '10px', // progress-bar width
  37. showValue: 0, //显示进度
  38. showVL: 0, // showValue 最大长度
  39. handleMoveStatus: false,
  40. handleX: 0, // 拖柄位置
  41. handleY: 0,
  42. progressBarInfo: {
  43. left: 0,
  44. bottom: 0,
  45. width: 0,
  46. height: 0
  47. },
  48. area: {
  49. left: 0,
  50. bottom: 0,
  51. width: 0,
  52. height: 0,
  53. top: 0
  54. },
  55. handle: {
  56. height: 0
  57. }
  58. };
  59. },
  60. beforeMount: function() {
  61. const res = uni.getSystemInfoSync()
  62. this.scale = 750 / res.windowWidth;
  63. // 0 为 false
  64. if (this.maxValue - this.minValue == 0) {
  65. console.error("min不能等于max:" + this.minValue + "->" + this.maxValue)
  66. return
  67. }
  68. else{
  69. this.showValue = this.valueFormat(this.value)
  70. }
  71. this.percent = Math.abs(this.showValue - this.minValue) / Math.abs(this.maxValue - this.minValue) * 100
  72. let minl = this.textLength(this.minValue + this.infoEndText)
  73. let maxl = this.textLength(this.maxValue + this.infoEndText)
  74. this.showVL = maxl > minl ? maxl : minl
  75. },
  76. mounted: function() {
  77. this.$nextTick(function() {
  78. const query = uni.createSelectorQuery().in(this)
  79. query.select(".cu-progress-bar").boundingClientRect(data => {
  80. this.progressBarInfo.width = data.width
  81. this.progressBarInfo.left = data.left
  82. this.progressBarInfo.bottom = data.bottom
  83. this.progressBarInfo.height = data.height
  84. if (this.direction == 'vertical'){
  85. this.handleY = this.progressBarInfo.height * (100 - this.percent) / 100
  86. }
  87. else{
  88. this.handleX = this.progressBarInfo.width * this.percent / 100
  89. }
  90. }).exec()
  91. query.select(".cu-area").boundingClientRect(data => {
  92. this.area.width = data.width
  93. this.area.left = data.left
  94. this.area.height = data.height
  95. this.area.bottom = data.bottom
  96. this.area.top = data.top
  97. }).exec()
  98. query.select(".cu-handle").boundingClientRect(data => {
  99. this.handle.height = data.height
  100. }).exec()
  101. })
  102. },
  103. props: {
  104. infoAlign: {
  105. default: 'right',
  106. type: String
  107. },
  108. step: {
  109. default: 1,
  110. type: [String, Number]
  111. },
  112. direction: {
  113. default: 'horizontal', //vertical 方向
  114. type: String
  115. },
  116. disabled: {
  117. default: false,
  118. type: [String, Boolean]
  119. },
  120. bgBorderRadius: {
  121. default: 0,
  122. type: [Number, String]
  123. },
  124. iconBorderRadius: {
  125. default: '8px',
  126. type: [Number, String]
  127. },
  128. iconColor: {
  129. default: 'inherit',
  130. type: String
  131. },
  132. iconSize: {
  133. default: '8px',
  134. type: [Number, String]
  135. },
  136. handleIcon: {
  137. default: '',
  138. type: String
  139. },
  140. backgroundColor: {
  141. default: 'inherit',
  142. type: String
  143. },
  144. max: {
  145. default: 100,
  146. type: [String, Number]
  147. },
  148. min: {
  149. default: 0,
  150. type: [String, Number]
  151. },
  152. value: {
  153. default: null, // 设置进度条进度
  154. type: [String, Number]
  155. },
  156. activeColor: {
  157. default: '#444444', // 已经过区域颜色
  158. type: String
  159. },
  160. noActiveColor: {
  161. default: '#888888', // 为经过区域颜色
  162. type: String
  163. },
  164. strokeWidth: {
  165. default: '3', // 行程宽度
  166. type: [String, Number]
  167. },
  168. damping: {
  169. default: 100, // 阻尼系数,越大移动越快
  170. type: [String, Number]
  171. },
  172. handleColor: {
  173. default: '#000000', // 拖柄颜色
  174. type: String
  175. },
  176. handleSize: {
  177. default: '8px', // 拖柄尺寸
  178. type: [String, Number]
  179. },
  180. handleBorderRadius: {
  181. default: '8px', // 拖柄圆角半径
  182. type: [String, Number]
  183. },
  184. showInfo: {
  185. default: false, // 是否在进度条右侧显示百分比
  186. type: [Boolean, String]
  187. },
  188. infoSize: {
  189. default: '16px', // 百分比显示字体尺寸
  190. type: [String, Number]
  191. },
  192. infoColor: {
  193. default: '#000000', // 百分比显示字体颜色
  194. type: String
  195. },
  196. infoEndText: {
  197. default: '',
  198. type: String
  199. },
  200. borderRadius: {
  201. default: 0, // 进度条圆角半径
  202. type: [String, Number]
  203. },
  204. width: {
  205. default: '200px', // 进度条总宽,如果显示百分比,则包括百分比在内的宽度
  206. type: [String, Number]
  207. },
  208. },
  209. computed: {
  210. getShowInfoStatus2view(){
  211. if ((this.showInfo == true || this.showInfo == 'true') && this.direction != "vertical"){
  212. return true
  213. }
  214. else{
  215. return false
  216. }
  217. },
  218. showVLC (){
  219. let minl = this.textLength(this.minValue.toFixed(0) + this.infoEndText)
  220. let maxl = this.textLength(this.maxValue.toFixed(0) + this.infoEndText)
  221. let L = maxl > minl ? maxl : minl
  222. return L
  223. },
  224. flexDirection (){
  225. if (this.direction == 'vertical'){
  226. return 'column'
  227. }
  228. else{
  229. return 'row'
  230. }
  231. },
  232. pgBarBottom (){
  233. // progress-
  234. if (this.direction == 'vertical'){
  235. return '0px'
  236. }
  237. else{
  238. return 'unset'
  239. }
  240. },
  241. showInfoStatus (){
  242. if (this.getShowInfoStatus() && this.direction != "vertical"){
  243. return true
  244. }
  245. else{
  246. return false
  247. }
  248. },
  249. pgBarBg(){
  250. let bg1
  251. if (this.direction == 'vertical'){
  252. bg1 = "linear-gradient(to top," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
  253. }
  254. else{
  255. bg1 = "linear-gradient(to right," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
  256. // qq
  257. let bg2 = "-webkit-linear-gradient(left," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
  258. let bg3 = "-o-linear-gradient(right," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
  259. let bg4 = "-moz-linear-gradient(right," + this.activeColor + ' ' + this.percent + "%," + this.noActiveColor + ' ' + this.percent + "%)"
  260. }
  261. return bg1
  262. },
  263. pgBarBR(){
  264. return this.sizeDeal(this.borderRadius)[2]
  265. },
  266. bgBR() {
  267. return this.sizeDeal(this.bgBorderRadius)[2]
  268. },
  269. iconBR() {
  270. return this.sizeDeal(this.iconBorderRadius)[2]
  271. },
  272. iconS() {
  273. return this.sizeDeal(this.iconSize)[2]
  274. },
  275. infoW() {
  276. const s = this.sizeDeal(this.infoSize)
  277. const size = s[0] * this.showVL + s[1]
  278. return size
  279. },
  280. infoS() {
  281. return this.sizeDeal(this.infoSize)[2]
  282. },
  283. infoRt(){
  284. // showinfo right
  285. if (this.infoAlign == 'left' && this.direction != 'vertical'){
  286. return 'unset'
  287. }
  288. else{ return 0 }
  289. },
  290. infoLt(){
  291. if (this.infoAlign == 'left' && this.direction != 'vertical'){
  292. return 0
  293. }
  294. else if (this.infoAlign == 'center' && this.direction != 'vertical'){
  295. let aw = this.area.width / 2
  296. const s = this.sizeDeal(this.infoSize)
  297. const size = aw - (s[0] * this.showVL) / 2 + 'px'
  298. return size
  299. }
  300. else{ return 'unset' }
  301. },
  302. areaW: {
  303. get (){
  304. if (this.direction == 'vertical'){
  305. return this.maxHeight(true)[2]
  306. }
  307. else{
  308. const s = this.sizeDeal(this.infoSize)
  309. const h = this.maxHeight()
  310. let w
  311. if (this.getShowInfoStatus()) {
  312. w = 'calc(' + this.width + ' - ' + s[0] * this.showVL + s[1] + ')'
  313. } else { w = this.width }
  314. return w
  315. }
  316. },
  317. set (w){ return w }
  318. },
  319. areaH: {
  320. get(){
  321. if (this.direction == 'vertical'){ return this.width }
  322. else{ return this.maxHeight()[2] }
  323. },
  324. set (v){ return v }
  325. },
  326. areaLeft() {
  327. if (this.infoAlign == 'left' && this.direction != 'vertical'){
  328. const s = this.sizeDeal(this.infoSize)
  329. const size = s[0] * this.showVL + s[1]
  330. return size
  331. }
  332. else{ return 0 }
  333. },
  334. pgBarW() {
  335. // width
  336. if (this.direction == 'vertical'){
  337. return this.sizeDeal(this.strokeWidth)[2]
  338. }
  339. else{
  340. const s = this.sizeDeal(this.infoSize)
  341. const w = this.sizeDeal(this.width)
  342. const s2 = this.sizeDeal(this.handleSize)
  343. let w2
  344. if (this.getShowInfoStatus()) {
  345. w2 = 'calc(' + w[2] + ' - ' + s[0] * this.showVL + s[1] + ' - ' + s2[2] + ')'
  346. } else {
  347. w2 = 'calc(' + w[2] + ' - ' + s2[2] + ')'
  348. }
  349. return w2
  350. }
  351. },
  352. pgBarH() {
  353. // height
  354. if (this.direction == 'vertical'){
  355. const w = this.sizeDeal(this.width)
  356. const s2 = this.sizeDeal(this.handleSize)
  357. let w2 = 'calc(' + w[2] + ' - ' + s2[2] + ')'
  358. return w2
  359. }
  360. else{ return this.sizeDeal(this.strokeWidth)[2] }
  361. },
  362. pgBarML() {
  363. // margin-left
  364. if (this.direction == 'vertical'){
  365. const s = this.sizeDeal(this.progressBarInfo.width)
  366. const ah = Number(this.area.width) / 2
  367. const t = ah - s[0] / 2 + 'px'
  368. return t
  369. }
  370. else{
  371. const s2 = this.sizeDeal(this.handleSize)
  372. return s2[0] / 2 + s2[1]
  373. }
  374. },
  375. pgBarMB() {
  376. // margin-bottom
  377. if (this.direction == 'vertical'){
  378. const s2 = this.sizeDeal(this.handleSize)
  379. return s2[0] / 2 + s2[1]
  380. }
  381. else{ return 0 }
  382. },
  383. handleS() {
  384. const s = this.sizeDeal(this.handleSize)
  385. return s[2]
  386. },
  387. handleL (){
  388. if (this.direction == 'vertical') {
  389. const s = this.sizeDeal(this.handleSize)
  390. const ah = Number(this.area.width) / 2
  391. const t = ah - s[0] / 2 + 'px'
  392. return t
  393. }
  394. else{
  395. return 'unset'
  396. }
  397. },
  398. handleT() {
  399. if (this.area.height && this.direction != 'vertical') {
  400. const s = this.sizeDeal(this.handleSize)
  401. const ah = Number(this.area.height) / 2
  402. const t = ah - s[0] / 2 + 'px'
  403. return t
  404. }
  405. else{
  406. return 'unset'
  407. }
  408. },
  409. handleBR() {
  410. const r = this.sizeDeal(this.handleBorderRadius)
  411. return r[2]
  412. },
  413. progressMainW() {
  414. let w
  415. if (this.direction == 'vertical'){
  416. w = this.maxHeight(true)[2]
  417. }
  418. else{
  419. w = this.width
  420. }
  421. return w
  422. },
  423. progressMainH() {
  424. let h
  425. if (this.direction == 'vertical'){
  426. h = this.width
  427. }
  428. else{
  429. h = this.maxHeight()[2]
  430. }
  431. return h
  432. },
  433. maxValue() {
  434. let max = Number.isNaN(parseFloat(this.max)) ? 100 : parseFloat(this.max)
  435. return this.valueFormat(max)
  436. },
  437. minValue() {
  438. let min = Number.isNaN(parseFloat(this.min)) ? 0 : parseFloat(this.min)
  439. let si = this.getStepInfo()
  440. return Number(min.toFixed(si[1]))
  441. // return this.valueFormat(min)
  442. },
  443. },
  444. watch: {
  445. showVLC (v){
  446. this.showVL = v
  447. if (this.direction != 'vertical'){
  448. const s = this.sizeDeal(this.infoSize)
  449. const h = this.maxHeight()
  450. let w
  451. if (this.getShowInfoStatus()) {
  452. w = 'calc(' + this.width + ' - ' + s[0] * this.showVL + s[1] + ')'
  453. } else {
  454. w = this.width
  455. }
  456. this.areaW = w
  457. this.areaH = h[2]
  458. }
  459. this.clientInit()
  460. },
  461. value(v) {
  462. // 当处于拖动状态时,禁止进度条外部触发变化
  463. if (!this.handleMoveStatus) {
  464. this.showValue = this.valueFormat(v)
  465. this.percent = (this.showValue - this.minValue) / Math.abs(this.maxValue - this.minValue) * 100
  466. if (this.direction == 'vertical'){
  467. this.handleY = this.progressBarInfo.height * this.percent / 100
  468. }
  469. else{
  470. this.handleX = this.progressBarInfo.width * this.percent / 100
  471. }
  472. }
  473. },
  474. },
  475. methods: {
  476. valueFormat (v){
  477. // set step
  478. v = Number(v - this.minValue).toFixed(7)
  479. let stepInfo = this.getStepInfo()
  480. let valueE = v * 10 ** stepInfo[1]
  481. let remainder = valueE % (stepInfo[0] * 10 ** stepInfo[1])
  482. let remainderInt = Math.floor(remainder)
  483. let value = (Math.floor(valueE) - remainderInt) / (10 ** stepInfo[1])
  484. return Number((value + this.minValue).toFixed(6))
  485. },
  486. getStepInfo() {
  487. // return step, decimal位数
  488. let step = Number(this.step)
  489. if (step <= 0 || !step){
  490. return [1, 0]
  491. }
  492. else{
  493. let steps = step.toString().split('.')
  494. if (steps.length == 1){
  495. return [step,0]
  496. }
  497. else {
  498. return [step,steps[1].length]
  499. }
  500. }
  501. },
  502. clientInit() {
  503. this.$nextTick(function() {
  504. const query = uni.createSelectorQuery().in(this)
  505. query.select(".cu-progress-bar").boundingClientRect(data => {
  506. this.progressBarInfo.width = data.width
  507. this.progressBarInfo.left = data.left
  508. this.progressBarInfo.bottom = data.bottom
  509. this.progressBarInfo.height = data.height
  510. if (this.direction == 'vertical'){
  511. this.handleY = this.progressBarInfo.height * this.percent / 100
  512. }
  513. else{
  514. this.handleX = this.progressBarInfo.width * this.percent / 100
  515. }
  516. }).exec()
  517. query.select(".cu-area").boundingClientRect(data => {
  518. this.area.width = data.width
  519. this.area.left = data.left
  520. this.area.height = data.height
  521. this.area.bottom = data.bottom
  522. this.area.top = data.top
  523. }).exec()
  524. if (this.maxValue - this.minValue == 0) {
  525. console.error("min不能等于max:" + this.minValue + "->" + this.maxValue)
  526. }
  527. else{
  528. let stepInfo = this.getStepInfo()
  529. let v = this.percent * (this.maxValue - this.minValue) / 100
  530. let valueE = v * 10 ** stepInfo[1]
  531. let remainder = valueE % (stepInfo[0] * 10 ** stepInfo[1])
  532. let remainderInt = Math.floor(remainder)
  533. let sv = (Math.floor(valueE) - remainderInt) / (10 ** stepInfo[1])
  534. this.showValue = sv
  535. }
  536. })
  537. },
  538. getShowInfoStatus(){
  539. if ((this.showInfo == true || this.showInfo == 'true') && this.direction != "vertical" && this.infoAlign !== 'center'){
  540. return true
  541. }
  542. else{
  543. return false
  544. }
  545. },
  546. textLength(t) {
  547. t = t.toString()
  548. let int = t.split('.')[0]
  549. let subt = t.match(/[^\x00-\xff]/g)
  550. let subl = 0
  551. if (subt) {
  552. subl = subt.length
  553. }
  554. let l = (int.length - subl + this.getStepInfo()[1]) / 3 * 2 + subl + 0.2
  555. return Number(l.toFixed(2))
  556. },
  557. maxHeight(vertical) {
  558. let h = []
  559. if (!vertical){ // direction 为 vertical 时不显示info
  560. let subt = this.infoEndText.match(/[^\x00-\xff]/g)
  561. if (subt){
  562. h.push(this.sizeDeal(this.infoSize)[0] * 1.1)
  563. }
  564. else{
  565. h.push(this.sizeDeal(this.infoSize)[0])
  566. }
  567. }
  568. h.push(this.sizeDeal(this.strokeWidth)[0])
  569. h.push(this.sizeDeal(this.handleSize)[0])
  570. h.sort(function(a, b) {
  571. return b - a
  572. }) // 降序
  573. return [h[0], 'px', h[0] + 'px']
  574. },
  575. sizeDeal(size) {
  576. // 分离字体大小和单位,rpx 转 px
  577. let s = Number.isNaN(parseFloat(size)) ? 0 : parseFloat(size)
  578. let u = size.toString().replace(/[0-9]/g, '')
  579. if (u == 'rpx') {
  580. s /= this.scale
  581. u = 'px'
  582. } else if (u == '') {
  583. u = 'px'
  584. }else if (u == 'vw') {
  585. u = 'px'
  586. s = s / 100 * 750 / this.scale
  587. }
  588. return [s, u, s + u]
  589. },
  590. change (){
  591. this.$emit('change', {
  592. type: 'change',
  593. value: this.showValue,
  594. })
  595. },
  596. handleMove(x_) {
  597. let x = x_
  598. x = x >= 0 ? x : 0
  599. let s = this.sizeDeal(this.handleSize)
  600. let cp
  601. let sv
  602. if (this.direction == 'vertical'){
  603. // #ifdef H5
  604. x = x - s[0] / 2 - this.area.bottom // ?
  605. cp = x / (this.area.height - s[0] - 1)
  606. // #endif
  607. // #ifndef H5
  608. x = x - this.area.top - s[0] / 2
  609. cp = x / (this.area.height - s[0] - 1)
  610. // #endif
  611. cp = cp <= 1 ? cp : 1
  612. cp = cp > 0 ? cp : 0
  613. let value = Number(((1 - cp) * (this.maxValue - this.minValue))) + this.minValue
  614. this.percent = (1 - cp) * 100
  615. this.showValue = this.valueFormat(value)
  616. this.handleY = x
  617. }
  618. else{
  619. cp = x / (this.area.width - s[0] - 1) // 多减 1 避免达不到maxValue
  620. cp = cp <= 1 ? cp : 1
  621. cp = cp > 0 ? cp : 0
  622. let value = Number((cp * (this.maxValue - this.minValue))) + this.minValue
  623. this.percent = cp * 100
  624. this.showValue = this.valueFormat(value)
  625. this.handleX = x
  626. }
  627. this.$emit('dragging', {
  628. type: 'dragging',
  629. value: this.showValue
  630. })
  631. },
  632. touchEnd() {
  633. if (!this.disabled){
  634. this.handleMoveStatus = false
  635. this.$emit('dragged', {
  636. type: 'dragged',
  637. value: this.showValue
  638. })
  639. }
  640. },
  641. areaTouchStart(e) {
  642. if (!this.disabled){
  643. this.handleMoveStatus = true
  644. let s = this.sizeDeal(this.handleSize)
  645. let tapX
  646. if (this.direction == 'vertical'){
  647. // #ifdef H5
  648. tapX = this.area.height + e.changedTouches[0].pageY
  649. // #endif
  650. // #ifndef H5
  651. tapX = e.changedTouches[0].pageY
  652. // #endif
  653. }
  654. else{
  655. tapX = e.changedTouches[0].pageX - this.area.left - s[0] / 2 // 拖柄中心与鼠标箭头一致
  656. }
  657. tapX = tapX >= 0 ? tapX : 0
  658. this.handleMove(tapX)
  659. this.$emit('dragstart', {
  660. type: 'dragstart',
  661. value: this.showValue
  662. })
  663. }
  664. },
  665. areaTouchMove(e) {
  666. if (!this.disabled){
  667. let s = this.sizeDeal(this.handleSize)
  668. let tapX
  669. if (this.direction == 'vertical'){
  670. // #ifdef H5
  671. tapX = this.area.height + e.changedTouches[0].pageY
  672. // #endif
  673. // #ifndef H5
  674. tapX = e.changedTouches[0].pageY
  675. // #endif
  676. }
  677. else{
  678. tapX = e.changedTouches[0].pageX - this.area.left - s[0] / 2
  679. }
  680. tapX = tapX >= 0 ? tapX : 0
  681. this.handleMove(tapX)
  682. }
  683. },
  684. touchCancel() {
  685. if (!this.disabled){
  686. this.touchEnd()
  687. this.$emit('dragcancel', {
  688. type: 'dragcancel',
  689. value: this.showValue
  690. })
  691. }
  692. },
  693. }
  694. }
  695. </script>
  696. <style scoped>
  697. @import 'cu-progress.css'
  698. </style>