Question

我正在尝试找出quasar内部的可折叠组件。由于某些原因，鼠标悬停事件不起作用。

请告诉我当用户将鼠标悬停在上方时如何用按钮替换文本输出区域。

请帮助！：）

<q-collapsible 
      opened
      icon="bookmark"
      :label="$t('Custom dashboards')"
      @mouseleave="var2 = true" //It doesn't work :(
      @mouseenter="var2 = false" //It doesn't work
    >
      <q-item>
        <q-btn
          @click="func()"
          icon="add"
          :label="$t('Create')"/>
      </q-item>
      </q-collapsible>

enter image description here

Answer 1

完整的HTML / Script / CSS可以解决您的问题。由于该功能不可用，因此我基本上做了您的工作，但进行了扩展以解决图像中提供的内容。

@mouseleave和@mouseenter正常工作。您只需要设置并使用该值即可隐藏/显示按钮。

我不相信QCollapsible在标头中支持插槽（如果我错了，请纠正），因此最好将QToolbar与QCollapsible和QList结合使用。

     public static final String HOST="https://api.linkedin.com/";
        public static final String PROFILE_LINK=HOST+"v1/people/~:(id,firstName,lastName,picture-url)?oauth2_access_token=";
        public static final String JSON_FORMAT=AMPERSAND+"format=json";

 private void profileRequestAsyncTask(final String accessToken) {

        showProgressDialog();
        // Instantiate the RequestQueue.
        RequestQueue queue = Volley.newRequestQueue(activity);

        String url=PROFILE_LINK+accessToken+JSON_FORMAT;
        // Request a string response from the provided URL.
        StringRequest stringRequest = new StringRequest(Request.Method.GET, url,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {
                        // Display the first 500 characters of the response string.
                        Log.e(TAG, "onResponse: "+response );
                        JSONObject dataAsJson= null;
                        try {
                            dataAsJson = new JSONObject(response);
                            String id=dataAsJson.getString("id");
                            String firstName=dataAsJson.getString("firstName");
                            String lastName=dataAsJson.getString("lastName");
                            String pictureUrl=dataAsJson.getString("pictureUrl");

                            Log.e(TAG, "onResponse: "+id+"="+firstName+"-"+lastName+"-"+pictureUrl );
                            String username=firstName+" "+lastName;
                            insertLinkedinAccount(id,username,pictureUrl,accessToken,expires);


                            editor.clear();
                            editor.commit();

                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                        //Log.e(TAG, "onApiSuccess:profileData- "+firstName+"-"+lastName+"-"+profileId);

                    }
                }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e(TAG, "onErrorResponse: "+error );
            }
        });

        // Add the request to the RequestQueue.
        queue.add(stringRequest);


    }

// Update the variables to toggle the display

new Vue({
  el: '#q-app',
  data: function() {
    return {
      listOpen: true,
      hover: false
    }
  },
  methods: {
    toggleList: function() {
      this.listOpen = !this.listOpen
    },
    addItem: function() {
      this.$q.notify('clicked')
    }
  },
  computed: {
    hovering() {
      return this.listOpen && this.hover
    }
  }
})

// Hide the existing collapse button (maybe there is a property for this)
div.q-collapsible.q-item-division.relative-position.q-collapsible-cursor-pointer>div>div.q-item.q-item-division.relative-position {
  display: none
}

IntStream#boxed

类星体框架（Vue）：可折叠和鼠窝

1 个答案: