Vue全家桶开发笔记

state 中没有属性的情况下,新增属性不会触发mutations修改。

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
commit('change', {
  c: 3,
  d: 4,
});
 
state: {
  test: {
    a: 1,
    b: 2,
  }
},
mutations: {
  change(state, payload) {
    state.test.c = payload.c; // 直接新增属性不会触发
    state.test = Object.assign(state.test, payload); // 浅拷贝不会触发
  }
}

 

解决方案

1
state.test = { state.test, ...payload };

  

vue-cli打包后,css里的背景图片无法找到资源

解决方法:

https://github.com/vuejs/vue-cli/issues/179

@margox

 

在build目录下新建一个cssPathResolver.js,内容如下:

1
2
3
4
5
6
7
module.exports = function (source) {
  if (process.env.NODE_ENV === 'production') {
    return source.replace('__webpack_public_path__ + "static', '"..')
  } else {
    return source
  }
}

 

 

webpack.base.conf.js里的img部分改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loaders: [
    {
      loader: path.resolve(__dirname, 'cssPathResolver')
    },
    {
      loader: 'url-loader',
      query: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      },
    },
  ],
},

  

build后图片加载是相对路径,无法找到图片

图片大小大于10K。

在build文件夹webpack.base.conf.js修改url-loader的limit。

1
2
3
4
5
6
7
{
  loader: 'url-loader',
  query: {
    limit: 150000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  },
}

 

或者可在src文件夹同级的目录建立static

1
<img src='static/xxxx.jpg'>

 

给v-for遍历产生的元素绑定事件,并动态添加style。
例:

1
2
3
4
5
6
7
<ul v-for='result of results'>
  <li>
    <div class='cut'>
      <img :src='result.src'>
    </div>
  </li>
</ul>

当图片加载时,记录当前图片原始宽高,处理后传值给style。

首先需求是,在加载图片时记录当前图片原始宽高,所以img标签需要加上@load绑定onload事件。

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
<ul v-for='result of results'>
  <li>
    <div class='cut'>
      <img @load='load' :src='result.src'>
    </div>
  </li>
</ul>
 
<script>
export default {
  data() {
    results: [
      { src: 'src', style: null },
      { src: 'src', style: null },
      { src: 'src', style: null },
    ],
  },
  methods: {
    load(e) {
      const img = e.target;
      const [naturalWidth, naturalHeight] = getNatural(img);
 
      function getNatural(img) {
        let nWidth;
        let nHeight;
        if (img.naturalWidth) {
          nWidth = img.naturalWidth;
          nHeight = img.naturalHeight;
        }
        //省略兼容html 4
        return [nWidth, nHeight];
      }
    },
  },
};
</script>

 

问题来了,这时候load方法虽然获取到了图片的原始宽高,但是传值给style则是个问题。如果要传当前元素的宽高,则需要在模板部分修改:

1
<img @load='load(result)' :src='result.src'>

 

这时传的值result会覆盖了event事件。导致load方法出错。

如果需要传event事件需要改成这样:

1
<img @load='load(result, $event)' :src='result.src'>

load方法就能同时接受当前遍历对象及触发事件。
ps:methods里面的方法有个默认声明的对象event,里面的属性和$event传过来的一样,但是官方文档没写,不建议使用。

此时在load方法里添加处理style的逻辑:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
methods: {
  load(item, e) {
    const img = e.target;
    const [naturalWidth, naturalHeight] = getNatural(img);
 
    //省略函数
    if (naturalWidth >= narturalHeight) {
      margin = ((naturalWidth * 100) / narturalHeight) / 2;
      item.style = { marginLeft: `-${margin}px`, height: '100px' };
    } else {
      item.style = { marginLeft: 'margin-left: -60px', height: '100px' };
    }
  },
},

这里也要注意style是个对象。同时,属性的值不能有分号,否则不会渲染style。

 

posted @   _NKi  阅读(509)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 如何打造一个高并发系统?
· 《SpringBoot》EasyExcel实现百万数据的导入导出
点击右上角即可分享
微信分享提示