ionic+vue+capacitor系列笔记--常用操作代码合集（图片引用，axios跨域配置，去除按钮波纹）

1.单个图片引用

html

1

ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.多个图片引用

html

   

1
2
3

ts

 setup(props, context) {
    let newItemList: any[] = [];
    let funObj = {
      a: "1111",
      aa: "11111111",
      aaa: "22222",
      aaaa: "3333",
    };
    Object.keys(funObj).forEach((_, i) => {
      newItemList.push({
        png: require("../assets/" +
          `image/a/a(${i + 1}).png`),
        title: _,
      });
    });
    return {
      newItemList
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.axios 临时使用 proxy 跨域代理

把 axios 的 请求路径 改造为当前 web 项目的run路径：

axios.defaults.baseURL = 'http://localhost:8080'
1

vue.config.js 的配置：

module.exports = {
  devServer: {
    proxy: 'https://www.aaa.cn'
  }
}
1
2
3
4
5

重启项目,你会发现不再跨域啦~~

npm run serve
1

4.ionic6+Vue3+ts+Capacitor 系列–禁用去除按钮波纹ion-ripple-effect

html

          
          A
        
1
2
3
4

less

// 配置禁用去除按钮波纹ion-ripple-effect---start
.btn-dis-effect{
	--ripple-color: transparent;
  }
// 配置禁用去除按钮波纹ion-ripple-effect---end
1
2
3
4
5

• 今天就写到这里啦~
• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~