vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.77k stars 389 forks source link

I don't know if it's a bug and I need help #2065

Closed mchao123 closed 1 year ago

mchao123 commented 1 year ago

I may have a problem, but I don't know where to provide feedback. I want to extend the elements of vue to fit the WeChat mini program, but the effect is not very good, the type prompt of volar shows unknown.


type unit = number | `${number}${'px' | 'em' | 'rpx' | 'vh' | 'vw' | '%' | 'rem'}`;
type sVal<T extends boolean|number>=T| `${T}`;
type MatchPair<S extends string> = S extends `[${infer A},${infer B}]` ? [A, B] : unknown;
declare namespace JSX {
  // @ts-ignore
  interface IntrinsicElements {
    view: JSX.IntrinsicElements['div'] & Partial<{
      /**指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 */
      'hover-class': 'none' | string;
      /**指定是否阻止本节点的祖先节点出现点击态,App、H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持)*/
      'hover-stop-propagation': sVal<boolean>;
      /**按住后多久出现点击态,单位毫秒 */
      'hover-start-time': sVal<number>;
      /**手指松开后点击态保留时间,单位毫秒 */
      'hover-stay-time': sVal<number>;
    }>
    'scroll-view': JSX.IntrinsicElements['div'] & Partial<{
      /**允许横向滚动 */
      'scroll-x': sVal<boolean>;
      /**允许纵向滚动 */
      'scroll-y': sVal<boolean>;

      /**距顶部/左边多远时(单位px),触发 scrolltoupper 事件 */
      'upper-threshold': unit;
      /**距底部/右边多远时(单位px),触发 scrolltolower 事件 */
      'lower-threshold': unit;
      /**设置竖向滚动条位置 */
      'scroll-top':unit;
      /**设置横向滚动条位置 */
      'scroll-left':unit;

      /**值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 */
      'scroll-into-view':string;
      /**在设置滚动条位置时使用动画过渡 */
      'scroll-with-animation':sVal<boolean>;
      /**iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 */
      'enable-back-to-top':sVal<boolean>;
      /**控制是否出现滚动条 */
      'show-scrollbar':sVal<boolean>;
      /**开启自定义下拉刷新 */
      'refresher-enabled':sVal<boolean>;

    }>
    button: Partial<{
      type: 'primary'
    }>
    image: JSX.IntrinsicElements['img'] & Partial<{
      type: 'primary'
    }>
    text: JSX.IntrinsicElements['span']
  }

}

"view" works fine, while customizations like "scroll-view" all appear unknown.

The translation comes from Bing and there can be many errors.

johnsoncodehk commented 1 year ago

You can config nativeTags in tsconfig for this in the next version.

{
  "vueCompilerOptions": {
    "nativeTags": [
      "view",
      "scroll-view",
      "..."
    ],
  },
}