最近这周用到的注意事项 + 上周的.

svg的使用: https://blog.csdn.net/userkang/article/details/84770843
很好! 但是我还看不懂什么的
element 简单的响应式布局 https://www.jianshu.com/p/ff03b969b724

#dedede 比#a9a9a9 会好很多~
因为颜色浅了 a9看上去就是灰色的qwq 比1px还粗粗
=============================
我上面做了导航栏,然后锚点定位的时候
有个问题 这个时候直接
padding-top:-80px(导航栏顶部的高度) 就好了

啊qwq  cursor取消设置  使用cursor:default
如果是none的话就会鼠标失去 失去鼠标了qwq
=====================
点击后跳转 
1 html  a 锚点
2 document.querySelector(".app-wrapper").scrollIntoView();
scroll into  qwq
直接跳到视图所对应的位置去了qwq 嗯嗯嗯
==============================
okok 编辑html 不太行那么点击change到html 然后再转化回来~
<li>里面想嵌套 要<li><ul><li></li></ul></li>才有效果
chorme 安全策略  在快捷方式那边 直接右键 在.exe后面加上那行hua 
--disable-web-security --user-data-dir
over

========================

好吧 顶部栏也要从顶部到底部的更新
那么设置了flex

    display: flex;
    flex-wrap: wrap;
    flex:  0 0 25%;
===================================
v-for的奇奇怪怪排列从6行到4行的更新

 <ul v-for="(item,index)?in?listBig.slice(0,3)" :key="index">
        <li>{{item.title}}</li>
        <li
          v-for="(itemm,indexx) in item.rows"
          :key="indexx"
          @click="toDocument(index,indexx,itemm.id)"
        >{{itemm.title}}</li>
      </ul>


      <ul >
        <li>常见问题</li>
        <li @click="toDocument(3,0,367)">常见问题</li>
        <li @click="toDocument(4,0,368)">隐私政策</li>
        <li @click="toDocument(5,0,369)">用户协议</li>
      </ul>
然后  还有 一个下面不能有相同的两个
v-for和v-if不能同时出现
所以还是slice  注意splice不行  直接[3]也不行  上面那个好像是左闭右开区间. index是从0开始.. 
=================================

啊啊啊啊啊啊。
视图不更新的问题。。。 
试了object.assign $set  .native.click 都没用

但是有点玄幻的是   点击显示有 点击隐藏却消失不了了_(:з」∠)_
试了一下打印  已经改变  只是没有实时更新 (不知道为什么  可能 是因为对象的指向问题? 明明只是赋值了一个小的 还是可以一起触发整个大的更新..)
后来  傻了吧唧的  把{{}} 里面的和隐藏显示一起改  就好了
也太傻了 因为显示是有用的 qwq  先就 

=============================
name前面有冒号,说明后面是一个变量或者表达式,没加冒号就是固定的字符串

需要async 和await 不然 你会发现...
你会发现传不进来
因为先进去就走完了 

async getDetail(passageId){
      let res =await axios.get(
        "https://mapi.xxxxxx.com/v1/article/view?id=" + passageId,
        {}
      );
      if (res.status === 200) {
        this.psgtitle=res.data.title;
        this.psgcontent=res.data.content;
      } 
    },


然后我又发现我二维数组不会  只能摸索着前行qwq  qwq就.. 
这几行代码 宝贵的实战经验... 太宝贵了qwq 
  this.listBig[indexxx].rows = res.data.rows;
          for(let j=0;j<this.listBig[indexxx].rows.length;j++){
            console.log(this.listBig[indexxx].rows[j].title);
          }
为什么1可以 换index就报错ne?
因为你超过限度了  越界了啊大哥 很危险的qwq 就  就
然后v-for那种写法是很好的我们知道 好的所以我们可以获取到了qwq
还有就是   从0开始到5  而不是1到6 因为前面会有多的你知道吧qwq  还是记录一下吧  反正项目里面用... 

===================================
吓人人  axios无效
我..  我咋去掉this 就解决了qwq
最后 搜搜咋个搜
==============================
滚动条, 竟然如此简单
直接.tac{

  height: 80%;
  overflow: hidden;
  overflow-y:auto;
}
即可解决  overflow-y 真好啊 还是要学会搜索啊  啊
====================
我 是用了el-collapse 来解决的。但是其实不用! 直接我门来
el-menu  el-submenu  还有group什么的qwq 都可以~~~ 而且  定制起来更容易…………………… (我就说 怎么可能那么难用了嘛)

==================================
看一下
新闻动态怎么的~ 然后我也接一下~~
1 进去之后肯定是先到index.vue
这个时候 就只是  
(1)上来就先getNews(挂载时候调用
【使用的async 如果这里堵住 就继续往下走qwq、】
let res=  await
 this.axios.get(..)
然后 还多了一行分号qwq.
(2)如果返回200,那么就同步一下呗  不然就是空的
【news+dataCount】
news:[] 只有这两个o

这样一下也不用单独写个js了  直接把路径的名字都给装好了qwq!
(啊 好像真的避免了.then qwq)
(3) 怎么写呢
v-for="(item, $index) in news"
            :key="$index"
            @click="toDetail(item.tid)"
那应该再去请求tid呗qwq   每一个click都是不通过的toDetail tid 这里用光了query去查询
img的话要:src="item.smeta"来绑定。布局整好就好了… 行

(4)如果没有pageindex  就是1 然后发请求查询
2.下面的detali直接 v-html还行.... 太厉害了哈哈哈

(4).可以可以。为什么楷体写这些东西这么舒服
==================================================
好像忽然知道了!原来是因为
min-height  而已吧qwq  设置了一个800  然后怎么缩放都没关系了
  谁知道呢 不过 也并不一定

https:/cxxxxxxx/content/index/gettitle?bk=2&facility=MOBILE&num=5&page=1

========================================================

上周的

1  el-table
然后template是给里面的插槽 qwq 
<el-table-column label="区块链查询" align="center">
      <template slot-scope="scope">
        <el-button class="stamp-query" @click="blockQuery(scope.row)">查询</el-button>
      </template>
      </el-table-column>
    </el-table>

就连page都是el-pagination

2 dangerously use html 动态渲染是非常危险的  xss攻击
行了行了知道了 
那我准备自己手写一个了好吧  其他部分好像都没什么事情了

看看login那边都有啥~~~

自己手写 并不复杂
(1)按钮处 改成click  之后 showmodal 变成true

(2)自己写一个大大大的mask  点击之后showmodal=false  可以吧~
<div @click="showModal=false" v-if="showModal" class="mask"></div>
    <div v-if="showModal" class="dialog">
      <login-register></login-register>
    </div>
(3)为了让遮罩层下面的灰度看起来像是那么回事  我们要这样~
.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(51, 51, 51, 0.7);
  z-index:100;
}
.dialog {
  position: absolute;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 70px;
  /*height: 400px;*/
  background:rgba(248,249,255,1);
  border-radius: 10px;
  z-index:300;
}

最后  最后  自己加个渲染动画8
试了半天 简单的transition无效 ..
transition 是需要加上前面什么样子后面什么样子 然后你是怎么过渡转换的  
存不存在于文档流之中(v-if) 仿佛就对它没用~~ 没用~
v-show  也是 你看啊 display:none 要改成visibility:hidden才可以
但是~~ 每次又一想到这个  你就觉得  这已经太多了 开始背离设计的初衷了  就像你为了一个little transition 把element-ui给自定义了那么多行  其实就是舍本逐末 qvq  越写越多的时候 直接自己手写
所以~ 直接把div放在里面 就解决了
大概是transition 只认得一个v-if吧
 <transition name="fade">
      <div @click="showModal=false" v-if="showModal" class="mask">
        <div v-if="showModal" class="dialog">
                <p>1111111111111111111111</p>
        </div>
      </div>
    </transition>

然后是笨笨的官网的教程里面的css  完美耶
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}


写js实在是太爽了. 先给自己发  弄清  then  和 catch  
catch 是 先写了括号 然后看返回值 有了返回值(err) 之后 再 巴拉巴拉  
catch ( err=>{

})

el-table 自定义使用slot的时候  有个地方  

<el-table-column prop="keyID" label="Access Key ID" align="center"></el-table-column>
        <el-table-column label="Access Key Secret" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isHide">{{ scope.row.keySecret }}</span>
          </template>
</el-table-column>
 
这里千万不能 写成this.scope
只要不是自己定义在data里面 的  就不要去添加那个this
添加之后卡了多长时间啊啊啊啊啊 整个的坏了 人坏了 坏了qvq!

跳转认证界面:
还是create 或者mouted的时候调用 ~
create是第一次来的时候用 mouted是你后来又点到的时候用 

   callback 是this.confirm  然后的.then
然后 注意这里的message之后  是通过callback   去给搞到的那个奇奇怪怪页面。
 this.$confirm('请先去认证', '提示', {
          confirmButtonText: '去认证',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '跳转认证页面!',
            callback: this.$router.push({ path: '/authentication/index' })
          })
==================
又继续了: 为什么 mounted也不生效! 发现原来是因为方法名字 忘记写this了qwq 
要写this    data里面要  methods里 相互调用也要!


写js号快乐!除了整个big布局我不知道怎么搞(因为屏幕的原因)之外  其他真的hin快乐呀

===========================
好了!现在要开始写页面之间的动画了qwq。

哦不 组长忽然来了 那我还是改前面吧qwq.

============================
我发现  get请求挺好的qwq  直接在url里传还行..... 服了服了
get是不能放参数的qwq

====================================================
好的! 不能直接去改变数据 而是........ 
不仅验证了arr是否存在 而且~
const arr = this.tableList
          if (arr) {
            arr.forEach((item, i, arr) => {
              item.utime = parseTime(item.utime)
              item.status = item.status === 0 ?'发起方未签': item.status === 1 ? '未生效' : item.status === 2 ? '已生效' : '作废'
            })
          }
========================================
这是我第五次忘记在方法调用的里面写this!!!!!


========================================
el-pagenation
红红火火恍恍惚惚  hhhhh哈哈哈哈  
    <el-pagination
        class="page"
        v-if="total > 10" // 其实这里可以直接给hide-on-single-page 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background 
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
哇哈哈哈 hhhhHhh哈哈哈哈 
然后  要绑定total (后端会给
change的时候直接调用就好。。。。点第几页到第几页嘛。不用+1
很方便qwq   
get请求的时候直接把参数传递进去感觉还行 qwq 只要不写乱
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值