请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

老师，如果提取use方法如何传递$event

这样的函数如果写在use函数里面如何接收参数，获取传递的参数

@touchstart="handleTouchstart($event)"

老师帮忙解答一下
目訫 2021-04-01 21:58:44
源自：13-2  解决真机调试过程中的展示问题
1360
收起

正在回答

插入代码

提交 取消

5回答

Dell 2021-04-24 19:58:20

handleTouchstart($event, 123, 456)

1 回复 有任何疑惑可以回复我~
收起回答
取消 回复
提问者 目訫 2021-04-23 19:38:47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<template>
  <div class="report">
    <div class="report_header"><div class="report_header_back iconfont" @click="handleBackClick">&#xe65e;</div>购物趋势图</div>
    <div class="report_content">
      <div class="report_content_title">购物统计报告</div>
      <div class="report_content_index">
        <span class="arrow-up">
          <svg data-v-666af9e5="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-angle-up fa-w-10"><path data-v-666af9e5="" fill="currentColor" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg>
        </span>
        <span class="percentage">34<span>%</span></span>
        <span class="text">+14,400</span>
      </div>
      <div class="report_content_chart" id="chart" />
      <div class="report_content_circle">
        <div
          :class="['circle', selected === index ? 'active' : '']"
          v-for="(item ,index) of circles"
          :key="index"
          @click="handleClickCircle(index)" />
      </div>
      <div class="report_content_bottom">购物趋势</div>
    </div>
    <div class="report_footer">
      <div class="report_footer_content">
        <div class="left">
          <div class="left_title">购物额</div>
          <div class="left_sub_title">累计购物额</div>
        </div>
        <div class="right">
          <small>&yen;</small> 300,254.00
        </div>
      </div>
      <div class="report_footer_progress">
        <div class="progress_background">
          <div class="progress_current" :style="{ width: `${progress * 100}%` }"></div>
        </div>
      </div>
      <div class="report_footer_text">
        <div>购物增长率</div>
        <div>34%</div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import * as Echarts from 'echarts'
 
const useChangeShowItem = (selected, getChart) => {
  const handleClickCircle = (index) => {
    selected.value = index
    getChart()
  }
  const changeShowItem = (index) => {
    handleClickCircle(index)
  }
  return { handleClickCircle, changeShowItem }
}
 
export default {
  name: 'Report',
  setup () {
    const router = useRouter()
    const circles = Array(3).fill('')
    const selected = ref(0)
    const timer = ref(null)
    const progress = ref(0.35)
 
    const getChart = () => {
      // 获取数据源
      const mockData = []
      for (let iii = 0; iii < 10; iii++) {
        mockData.push(Math.floor(Math.random() * 100 + 200))
      }
      // 获取Chart => DOM
      const chartDOM = document.getElementById('chart')
      // 初始化echarts对象
      const Chart = Echarts.init(chartDOM)
      // 生成渲染参数
      const options = {
        xAxis: {
          type: 'category', // 坐标轴类型
          show: false // 坐标轴显示
        },
        yAxis: {
          min: 0, // 最小值
          max: 350, // 最大值
          show: false
        },
        series: [{
          data: mockData,
          type: 'line',
          smooth: true, // 平滑
          areaStyle: { // 区域颜色
            color: 'rgba(75, 193, 252, .5)'
          },
          lineStyle: { // 线的颜色2
            width: 3,
            color: 'rgba(75, 193, 252, 1)'
          },
          itemStyle: { // 点样式
            color: 'rgba(75, 193, 252, 1)'
          },
          symbolSize: 8 // 点大小
        }],
        grid: { // 设置负数可以扩张延伸
          top: 0,
          bottom: 0,
          left: -30,
          right: -30
        },
        tooltip: {
          trigger: 'axis', // 如何触发
          axisPointer: { // tooltip类型
            type: 'cross',
            label: {
              backgroundColor: '#6a7985' // tooltip触发线背景颜色
            }
          }
        }
      }
      // 渲染图表
      Chart.setOption(options)
    }
 
    const { handleClickCircle, changeShowItem } = useChangeShowItem(selected, getChart)
 
    onMounted(() => {
      getChart()
      timer.value = setInterval(() => {
        changeShowItem(++selected.value > 2 ? 0 : selected.value)
      }, 3000)
    })
    onUnmounted(() => {
      if (timer.value) clearInterval(timer.value)
    })
    const handleBackClick = () => {
      router.back()
    }
    return { handleBackClick, circles, selected, progress, handleClickCircle }
  }
}
</script>


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
提问者 目訫 2021-04-22 21:19:18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<div
  class="icons__item"
  :style="{ top: `${index <= 4 ? 36 : 111}px`, left: leftPosition(index) }"
  v-for="(item, index) of homeIconsList"
  :key="item.desc"
  @touchstart="handleTouchstart($event)"
  @touchmove="handleTouchMove($event, index)"
  @touchend="handleTouchend($event, index)"
>
  <img class="icons__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${ item.imgName }.png`" />
  <p class="icons__item__desc">{{ item.desc }}</p>
</div>
       
const useMethods = (homeIconsList, e) => {
  const handleTouchstart = (e) => {
    const element = e.targetTouches[0]
    e.currentTarget.style.opacity = 0.5
    client.x = element.clientX // 鼠标落点初始位置
    client.y = element.clientY // 鼠标落点初始位置
    client.left = element.target.getBoundingClientRect().left // getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
    client.top = element.target.getBoundingClientRect().top
  }
  const handleTouchMove = (e, index) => {
    const element = e.targetTouches[0]
    // 当前鼠标落点加上元素自身左边距上边距
    const left = element.clientX - 35
    const top = element.clientY - 270
    // 移动当前元素
    e.currentTarget.style.left = `${left}px`
    e.currentTarget.style.top = `${top}px`
  }
  const handleTouchend = (e, index) => {
    const end = {
      x: e.changedTouches[0].clientX,
      y: e.changedTouches[0].clientY
    }
    e.currentTarget.style.opacity = 1
    const width = document.getElementsByClassName('icons')[0].offsetWidth
    const positionX = parseInt(end.x / width * 10)
    let positionY = 1
    if (index <= 4) {
      if (end.y - client.y < 30) {
        positionY = 1
      } else {
        positionY = 2
      }
    } else if (index > 4) {
      if (end.y - client.y < 0) {
        positionY = 1
      } else {
        positionY = 2
      }
    }
    let position = 0
    if (positionX <= 1) {
      if (positionY === 1) {
        position = 0
      } else {
        position = 5
      }
    } else if (positionX <= 3) {
      if (positionY === 1) {
        position = 1
      } else {
        position = 6
      }
    } else if (positionX <= 5) {
      if (positionY === 1) {
        position = 2
      } else {
        position = 7
      }
    } else if (positionX <= 7) {
      if (positionY === 1) {
        position = 3
      } else {
        position = 8
      }
    } else if (positionX <= 9) {
      if (positionY === 1) {
        position = 4
      } else {
        position = 9
      }
    }
    const item = homeIconsList.value[index]
    homeIconsList.value.splice(index, 1)
    homeIconsList.value.splice(position, 0, item)
    store.commit('changeHomeIconsList', homeIconsList.value)
  }
  return { handleTouchstart, handleTouchMove, handleTouchend }
}


老师，应该如何拿到$event

0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
提问者 目訫 2021-04-03 15:48:29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div
    class="icons__item"
    :style="{ top: `${index <= 4 ? 36 : 111}px`, left: leftPosition(index) }"
    v-for="(item, index) of homeIconsList"
    :key="item.desc"
    @touchstart="handleTouchstart($event)"
    @touchend="handleTouchend($event, index)"
  >
    <img class="icons__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${ item.imgName }.png`" />
    <p class="icons__item__desc">{{ item.desc }}</p>
  </div>
</template>
 
<script>
import { reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
 
export default {
  name: 'User',
  components: { Docker },
  setup () {
    const store = useStore()
    const client = reactive({
      x: 0,
      y: 0
    })
    const { homeIconsList } = toRefs(store.state)
    const { handleLogoutClick } = useLogoutEffect()
    const handleTouchstart = (e) => {
      const element = e.targetTouches[0]
      client.x = element.clientX
      client.y = element.clientY
    }
    return { handleLogoutClick, handleTouchstart }
  }
}
</script>
 
<style scoped>
</style>


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
Dell 2021-04-03 14:15:02

一样的呀，可以用第二个，第三个 ...... 参数传递

0 回复 有任何疑惑可以回复我~
收起回答
  • 提问者 目訫 #1 
    $event如何穿到use函数中呢，老师
    回复 有任何疑惑可以回复我~ 2021-04-03 14:16:11
  • Dell 回复 提问者 目訫 #2 
    你给我一段长一点的代码看一下
    回复 有任何疑惑可以回复我~ 2021-04-03 14:18:49
  • 提问者 目訫 回复 Dell #3 
    （代码在我的那条回复里面可以看到）
老师，代码中handleTouchstart方法需要$event参数，现在方法是写在setup函数中，如果写在use方法中，应该如何获取$event呢
    回复 有任何疑惑可以回复我~ 2021-04-03 15:47:40
点开查看后面6条评论
取消 回复

相似问题

老师，关于 event 的问题请教一下。
882 0 4
vue3 该如何传递 获取themeList函数的那个this参数，我试了很多种方法都不行
1223 0 3
老师，如何自定义mode
765 0 2
小程序web-view组件传递参数接收不完全和appId报错的问题
1234 0 5
如何使用filter传递呢
819 0 3

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
Vue3入门与项目实战 掌握完整知识体系
  • 参与学习       3370    人
  • 提交作业       1948    份
  • 解答问题       1450    个

明星讲师DELL亲授，全方位知识点+高匹配度项目，入门到深度掌握

了解课程

本课精华内容

问答 作业

https://www.fastmock.site/#/project/6581 依旧提示失败或项目不存在

313 1

获取本地存储信息报错

1.5k 18

老师，如果提取use方法如何传递$event

1.4k 14

老师，后台接口访问不了了

1.1k 12

上线手在用电脑打开无法显示图片

1.1k 11

查看更多本课问答
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号